HTML中的列表元素、表格、以及动画效果实现
列表元素
什么是列表元素?
什么时候使用列表元素?
凡是多项罗列的地方都可以使用列表
列表元素的使用场景
有序列表格式:
注意:<ol>是父级元素 , <li>是子级元素;
<ol>的子级只能是<li>标签
在有序列表里面进行布局只能放在<li>标签里
<ol>
<li>
</li>
</ol>
无序列表:
<ul>
<li>
</li>
</ul>
设置列表样式:
list-style:none 无样式,即让次盒子隐藏
list-style属性的取值:
使用自定义列表:
<dl>
<专业术语名词解释>
<dt>
xxxxxxxxxx
</dt>
<术语内容,解释内容>
<dd>
xxxxxxx
</dd>
</dl>
列表的嵌套:
在有序列表里面进行布局只能放在
- 标签里
表格
表格标签:
<table> </table>
行标签:
<tr> </tr>
列标签:
<td> </td>
合并列:
属性:colspan 属性值:数字 <td colspan = " "> </td>
合并列代码示例:合并两列
<td colspan = 2"> </td>
动画效果
过渡
transition(过渡):在规定的时间内,从一个值过渡到另外一个值 transition-duration:规定的时间(单位:s,ms) transition-propery:过渡筛选,指定哪个属性进行过渡 transition-delay:过渡延迟,设置过渡延迟时间((单位:s,ms)
过渡条件
尺寸:区块、图片宽高、字体大小、盒模型 位置:四个方向的取值变化 透明度(opacity):0-1(从无到有) 颜色