列表——块级元素
1、无序列表
无次序、无级别,列表项之间是并列关系
- 语法
<ul>
<li>列表项</li>
<li>列表项</li
<li>列表项</li
</ul>
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 自带间距
- 自带填充
- 自带列表符
- css属性
- list-style-type属性 列表符类型
- none 无列表符号
- disc 实心圆,默认
- circle 空心圆
- square 实心方块
- list-style-position属性
- inside 列表符放在文本内
- outside默认值,列表符放在文本的外侧
- list-style属性
- list-style: list-style-tpye list-style-position;
- list-style: none;去掉列表符
例:
- list-style-type属性 列表符类型
<ul><!-- 列表容器 -->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<!-- 列表符 -->
<ul>
<li style="list-style-type:none;">列表项1</li>
<li style="list-style-type:disc;">列表项2</li>
<li style="list-style-type: circle;">列表项3</li>
<li style="list-style-type: square;">列表项4</li>
<li style="list-style-position: inside;">列表项5</li>
<li style="list-style-position: outside;">列表项6</li>
<li style="list-style-type:circle;list-style-position: inside;">列表项7</li>
<li style="list-style: circle inside;">列表项7</li>
</ul>
<!-- 无序列表 第一个列表项没有列表符,第二个列表项默认列表符,第三个列表项实心方块,在文本内显示 -->
<ul>
<li style="list-style:none;">1</li>
<li>2</li>
<li style="list-style: square inside;">3</li>
</ul>
2、有序列表
有排列次序,各个列表项之间是并列关系
- 语法
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ol start="5" type="a" reversed>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- start属性: 开始值
- type属性:列表符类型
- reversed属性:倒序
- 特性
- 与无序列表基本一致
例:
- 与无序列表基本一致
<ol><!-- 列表容器 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<hr>
<ol start="6">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol start="1" type="i">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol start="5" type="a" reversed>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
3、自定义列表
- 语法
<dl>
<dt>列表标题 或专业术语</dt>
<dd>列表项或对专业术语的解释1</dd>
<dd>列表项或对专业术语的解释2</dd>
<dd>列表项或对专业术语的解释3</dd>
</dl>
浏览器显示,dd标签中的内容锁紧显示
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 自带间距
例:
<dl>
<dt>列表标题</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
<dd>列表项3</dd>
</dl>
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dd>使用标记来描述网页</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
</dl>
ul、ol、dl分别使用在哪
使用:ul使用的地方,顶部导航
ol一般使用在热点排行榜
使用:dl使用的地方,底部指南