当前位置： 移动技术网 > IT编程>网页制作>CSS > css之表格,表单

css之表格,表单

2018年09月29日  | 移动技术网IT编程  | 我要评论

顾定轩,末日天坑,中华水网

一.表格

1.定义

表格由<table>标签来定义.每个表格均有若干行(由tr标签定义),每行被分割为若个单元格(由td标签定义).字母td指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本、图片、列表、段落、表单、水平线等待

2.基本结构

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

3.表格标签

<table>      定义表格
<th>         定义表格的表头
<tr>         定义表格的行
<td>         定义表格单元格
<caption>    定义表格标题
<colgroup>   定义表格列的组
<thead>      定义表格的页眉
<tbody>      定义表格的主体
<tfoot>      定义表格的页脚

4.常用属性

table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则

td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比

caption
-- align: left | right | top | bottom：标题方位

5.表格实现垂直水平居中

.sup {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

二.表单

1.概念

表单是一个包含表单元素的区域.
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)等等

2.基本结构

<form>
    <label>输入框</label><input type="text" />
    <button type="submit">提交</button>
</form>

3.常用类型标签

  • 文本框
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">
  • 密文框
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">
  • 单选框
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
  • 复选框
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球
  • 下拉选项
<select name="major">
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine" selected>医学</option>
    <option value="architecture">建筑学</option>
    <option value="biology">生物学</option>
</select>

<!--多选-->
<select name="major" multiple>
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine">医学</option>
    <option value="architecture">建筑学</option>
    <option value="biology">生物学</option>
</select>
  • 多行文本输入
<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>
  • 按钮
<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>

4、全局属性

  • required：必填项
  • pattern：正则

5.伪类

  • focus:获得焦点

三.音频

1.基本语法

<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持h5新标签audio，此段话将被显示出来</audio>

2.常用属性

属性 值 描述
autoplay autoplay 自动播放
controls controls 音频控件
loop loop 循环
muted muted 静音
preload auto metadata none 预加载
src url 音频源

四.视频

1.基本语法

<video width="672" height="378" controls poster="img/poster.png">
        <source src="media/html5的前世今生.mp4" type="video/mp4"></source>
        当前浏览器不支持video直接播放
</video>

2.常用属性

属性 值 描述
width pixels 宽度
height pixels 高度
controls controls 视频控件
autoplay autoplay 自动播放
loop loop 循环播放
muted muted 静音
poster url 图像占位
src url 视频源
preload auto metadata none 预加载
  • source属性
属性 值 描述
src url 视频源
type mime_type mime类型

五.形变

平移
transform:translate(x,y) | translatex(num) | translatey(num)
缩放
transform:scale(x,y) | scalex(num) | scaley(num)
旋转
transform: rotatex(角度) | rotatey(角度) | rotatez(角度);
倾斜
transform:skew(角度x,角度y) | skewx(角度x) | skewy(角度y)

六.浏览器适配

  • -o-：opera浏览器
  • -ms-：ie浏览器
  • -moz-：firefox浏览器
  • -webkit-：chrome、safari、android浏览器
径向渐变
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: -webkit-radial-gradient(red, yellow);
}

倒影
-webkit-box-reflect: below | above | left | right;

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网