列表

@List

Xmind: 列表思维导图

Ordered List

. 有序列表 Ordered List

. 元素按照一定规则排列，如：从小到大；类似办公文档的编号 numbering

. 应用较少；更多通过定制编号实现，如使用伪元素 - ::before、计数器

<ol>

. 块盒 block

. 使用属性 type 指定排序方式；默认按照数字升序排序

. 可以嵌套使用

<li>

. 列表项 list item；块盒 block

. <ol> 的子元素只能是 <li>

<ol type="" start="" reversed>
    <li></li>
    //... ...
    <li></li>
</ol>

有序列表的属性
类别	说明
type	1：按数字；默认排序方式 A：按大写字母、a：按小写字母 I：按大写罗马字母、i：按小写罗马字母
start	起始值；只适用于数字排序
reversed	倒序；减到0会成为负数

[] 常见有序列表

从4开始排序

<ol start=4>
    <li>list1</li>
    <li>... ...</li>
    <li>list5</li>
</ol>

从3开始倒序排序

<ol start=3 reversed>
    <li>list1</li>
    <li>... ...</li>
    <li>list5</li>
</ol>

按照小写罗马字母排序

<ol type="i">
    <li>list1</li>
    <li>... ...</li>
    <li>list5</li>
</ol>

按照大写字母降序排序

<ol type="A" reversed>
    <li>list1</li>
    <li>... ...</li>
    <li>list5</li>
</ol>

Unordered List

. 无序列表 Unordered List

. 元素彼此之间没有顺序；取而代之的是标记 marker；类似于办公文档的项目符号 bullets

. 早期广泛用于导航结构：<ul> → <li> → <a>；结构清晰；避免被 SEO 降权

. 现在多使用 <nav> → <a> 实现；结构层级减少而又不失去 SEO 增强

[] OA文档如何定制下划线颜色？

[] OA文档如何定制项目符号？

<ul>

. 块盒 block

. 可以嵌套使用

<li>

. 列表项 list item；块盒 block

. <ul> 的子元素只能是 <li>

<ul type="">
    <li></li>
    //... ...
    <li></li>
</ul>

无序列表属性 type
类别	说明
disc	点；默认标记
square	方块
circle	圆圈

::marker

. 除了使用 type 选择项目符号外，还可以使用列表的伪元素 ::marker 定制更为丰富的效果

. 列表默认的项目符号也是通过 ::marker 实现的

[] 常见无序列表

使用 type，指定为 square；适合单个列表

<ul type="square">
    <li></li>
    //... ...
    <li></li>
</ul>

使用 CSS 统一设置为方形 square、橙色；适合大量列表

ul {
  list-style: square;
}

li::marker {
  color: #fa8231;
}

定制项目符号/标记；可以使用普通字符或使用 CSS 的实体 Entity 对应的 Unicode 编码

. 普通字符 - 一个或多个

li::marker {
  content: '+';
}

. 直接拼接

li::marker {
  content: '+ ';
}

. 版权符号 © 对应的 Unicode 编码：©

li::marker {
  content: '\00A9';
}

. 额外拼接更多字符

li::marker {
  content: '\00A9''. ';
}

最佳体验

. 为了消除默认的项目符号对布局的影响，取消默认的项目符号，并使用伪元素 ::before 定制

ul {
  list-style: none;
}

li::before {
  content: "\2610";
}

Definition List

. 描述列表/自定义列表 Description List / Definition list；用于对数据总结或分类

. 应用非常广泛：各大门户网站底部的信息和版权等
<dl>: . 块盒 block

. 一个 <dl> 可以有多个 <dt>、多个 <dd>

. 也可以使用多个 <ul> 代替
<dt>: . 块盒 block

. 定义列表项标题 Description Term / Definition Title - 数据项的汇总/分类标题
<dd>: . 块盒 block

. 定义列表项详情/描述 Description Details / Definition Description - 各个数据项

CSS Initialization

Why: . 列表默认有 margin 和 padding

. 项目符号或编号会破坏页面布局

. 保证样式在不同浏览器的一致性
How: . 使用通配符取消所有元素的 margin 和 padding；并修改盒模型计算方式

. <ol> 和 <ul>取消默认项目符号和编号；如需要，再根据设计重新指定

. <dl> 没有更多操作

Drill

[]导航；关于、京东、小米

. 早期导航结构 - 层级深/复杂；需先初始化，去除列表的项目符号和其它默认样式再使用

<ul type="">
    <li>
      <a href="" target="" title=""> discernible text </a>
    </li>
    //... ...
    <li>
      <a href="" target="" title=""> discernible text </a>
    </li>
</ul>

. 现在导航结构 - 层级浅/简单；直接使用

<nav>
  <a href="" target="" title=""> discernible text </a>
  //... ...
  <a href="" target="" title=""> discernible text </a>
</nav>

Summary & Homework

Summary

有序列表 <ol> 的使用

无序列表 <ul> 的使用

自定义列表 <dl> 的使用

列表的样式初始化

Homework

1. 结合实际情况，思考如何规范使用列表？

2. 筹备并完善自己的初始化样式表

[] 列表设计

[] 导航设计

. 完善个人网站导航：分别使用<ul> → <li> → <a> 和 <nav> → <a> 实现

. 鼠标 :hover 时，使用文字下划线提示，同时改变文字颜色

[] 底部信息区设计

. 分别使用 <ul> 和 <dl> 创建页面底部 <footer> 信息区；如下图；请加入自己的设计