正文
css之表格,表单
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
一.表格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;