首页 > 代码库 > CSS之列表标签
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="http://www.mamicode.com/#">购物流程</a> 5 <a href="http://www.mamicode.com/#">会员介绍</a> 6 <a href="http://www.mamicode.com/#">生活旅行/团购</a> 7 <a href="http://www.mamicode.com/#">常见问题</a> 8 <a href="http://www.mamicode.com/#">大家电</a> 9 <a href="http://www.mamicode.com/#">联系客服</a> 10 </dd> 11 </dl> 12 <dl> 13 <dt>配送方式</dt> 14 <dd> 15 <a href="http://www.mamicode.com/#">上门自提</a> 16 <a href="http://www.mamicode.com/#">211限时达</a> 17 <a href="http://www.mamicode.com/#">配送服务查询</a> 18 <a href="http://www.mamicode.com/#">配送费收取标准</a> 19 <a href="http://www.mamicode.com/#">海外配送</a> 20 </dd> 21 </dl> |
CSS之列表标签