CSS之列表标签

1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语unordered list，“无序列表”的意思。

li 就是英语list item ， “列表项”的意思。

1                <ul>

2                         <li>北京</li>

3                         <li>上海</li>

4                         <li>广州</li>

5                         <li>铁岭</li>

6                </ul>

也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

 

下面的是错误的，因为必须用ul包裹：

7                <li>北京</li>

8                         <li>上海</li>

9                         <li>广州</li>

10                       <li>铁岭</li>

 

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

1                <ul>

2                         <h3>中国主要城市</h3>

3                         <li>北京</li>

4                         <li>上海</li>

5                         <li>广州</li>

6                         <li>铁岭</li>

7                </ul>

 

 浏览器会默认的给无序列表小圆点的“先导符号”

但是，再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

 

 

ul标签实际应用场景：

 

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

1        <ul>

2                         <li>

3                                 <h4>谈治国理政</h4>

4                                 <p>¥49.00</p>

5                                 <p>《谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以123同志为***的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>

6                         </li>

7                         <li>

8                                 <h4>用典</h4>

9                                 <p>¥23.60</p>

10                               <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对***重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>

11                       </li>

12                       <li>

13                               <h4>摆脱贫困</h4>

14                               <p>26.00</p>

15                               <p>追本溯源 融会贯通        深入学习贯彻***系列重要讲话精神        推动学习贯彻向广度深度拓展    *****部个人专著 时隔22年后重印发行</p>

16                       </li>

17              </ul>

 

甚至于可以再放一个ul：

1        <ul>

2                         <li>

3                                 吃的

18                               <ul>

19                                       <li>饼干</li>

20                                       <li>面包</li>

21                                       <li>

22                                                巧克力

23                                                <ul>

24                                                        <li>德芙</li>

25                                                        <li>费列罗</li>

26                                                </ul>

27                                       </li>

28                               </ul>

4                         </li>

5                         <li>

6                                 用的

7                                 <ul>

8                                         <li>笔记本</li>

9                                         <li>圆珠笔</li>

10                               </ul>

11                       </li>

12                       <li>

13                               喝的

14                               <ul>

15                                       <li>牛奶</li>

16                                       <li>可乐</li>

17                               </ul>

18                       </li>

19              </ul>

 

2 有序列表

ordered list  有序列表，用ol表示

1                <ol>

2                         <li>小苹果</li>

3                         <li>月亮之上</li>

4                         <li>最炫民族风</li>

5                </ol>

 

浏览器会自动增加阿拉伯序号：

 

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

 

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

1        <ul>

2                <li>1. 小苹果</li>

3                <li>2. 月亮之上</li>

4                <li>3. 最炫民族风</li>

5        </ul>

 

3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 　　　　　　　　　　 定义列表

dt表示definition title    　　　　　　　　  定义标题

dd表示definition description 　　　　　　定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd

1                <dl>

2                         <dt>北京</dt>

3                         <dd>国家首都，政治文化中心</dd>

4                         <dt>上海</dt>

5                         <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

6                         <dt>广州</dt>

7                         <dd>中国南大门，有珠江、小蛮腰</dd>

8                </dl>

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

dd是描述dt的。

 

 

定义列表用法非常灵活，可以一个dt配很多dd：

1                <dl>

2                         <dt>北京</dt>

3                         <dd>国家首都，政治文化中心</dd>

4                         <dd>污染很严重，PM2.0天天报表</dd>

5                         <dt>上海</dt>

6                         <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

7                         <dt>广州</dt>

8                         <dd>中国南大门，有珠江、小蛮腰</dd>

9                </dl>

北京这个项目，用了两个dd来描述。

还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。

1                <dl>

2                         <dt>北京</dt>

3                         <dd>国家首都，政治文化中心</dd>

4                         <dd>污染很严重，PM2.0天天报表</dd>

5                </dl>

6         

7                <dl>

8                         <dt>上海</dt>

9                         <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>

10              </dl>

11       

12              <dl>

13                       <dt>广州</dt>

14                       <dd>中国南大门，有珠江、小蛮腰</dd>

15              </dl>

 

真实案例：

结构：

1        <dl>

2                <dt>购物指南</dt>

3                <dd>

4                         <a href="#">购物流程</a>

5                         <a href="#">会员介绍</a>

6                         <a href="#">生活旅行/团购</a>

7                         <a href="#">常见问题</a>

8                         <a href="#">大家电</a>

9                         <a href="#">联系客服</a>

10              </dd>

11      </dl>

12      <dl>

13              <dt>配送方式</dt>

14              <dd>

15                       <a href="#">上门自提</a>

16                       <a href="#">211限时达</a>

17                       <a href="#">配送服务查询</a>

18                       <a href="#">配送费收取标准</a>

19                       <a href="#">海外配送</a>

20              </dd>

21      </dl>