1、无序列表
各列表项之间没有次序,
-
特性
-
ul 和 li 标签都是块级标签
-
宽度默认撑满整个父元素
-
高度默认由内容撑开
-
独立成行
-
自带外间距
-
自带内填充
-
自带列表符,去掉自带列表符 li{ list-style: none; }
-
-
css属性
-
list-style-type属性:列表符类型
-
circle空心圆|disc实心圆,默认值|square实心正方形|none去掉列表符
-
-
-
应用场景 : 新闻列表 、导航 、商品列表
-
注意:ul的直接子元素只能是li
各项之间为并列关系
2、有序列表
有排列次序,各项之间为并列关系
应用场景: 有序的列表
特性 与无序列表基本一致
3、自定义列表
语法:
<dl>
列表容器
<dt>词专业名</dt>
<dd>对专业名次的解释</dd>
</dl>
dl自定义列表、dt 自定义列表项、dd自定义列表项的注释(描述)
在浏览器中,dd标签的内容会缩进显示
<dl>
<dt>词专业名</dt>
<dd>对专业名次的解释</dd>
<dt>web大前端</dt>
<dd>HTML、CSS、JAVASCRIPT</dd>
</dl>
> 浏览器显示,dd标签的内容会缩进显示
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行
-dl,dd默认自带外间距
典型应用
- 名词解释、分类(大分类-细节的类别)