css3基础100问之什么时候用无序列表还是自定义列表?(4)
下面先复习一下无序列表和自定义列表的基础知识吧。
无序列表 ul (重点)
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。
京东用的是无序列表
一般在侧导航栏和网页底部信息
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!```
1.2 有序列表 ol (了解)很少用
<img src="media/gold.png" />
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
```html
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
```
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。
1.3 自定义列表(理解用的也挺多)
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
```html
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
太平洋电脑商城用的是自定义列表:
头部导航栏和底部导航栏都是用的自定义列表
唯品会用的也是自定义列表
1.4 列表总结
| 标签名 | 定义 | 说明 |
| --------- | :----------: | :----------------------------------------------------- |
| <ul></ul> | **无序标签** | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 |
| <ol></ol> | 有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
| <dl></dl> | 自定义列表 | 里面有2个兄弟, dt 和 dd |
总结:目前用的最多的是无序列表和自定义列表,很少用到有序列表,许多开发者用的自定义列表是很多的。一般情况下无序列表和自定义列表是可以换着通用的。