@List

ordered list
unordered list
definition list

有序列表 ordered list

说明

. <ol>：无序列表 ordered list；block

. <li>：列表项，list item；block

. 元素按照一定规则排列，如：从小到大

. 可以按照数字、字母等顺序排序/编号

. 可以嵌套使用

. 使用较少

语法

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

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

[ ] 从4开始排序

list1
list2
list3
list4
list5

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

[ ] 从3开始倒序排序

list1
list2
list3
list4
list5

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

[ ] 按照小写罗马字母排序

list1
list2
list3
list4
list5

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

[ ] 按照大写字母降序排序

list1
list2
list3
list4
list5

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

无序列表 unordered list

说明

. <ul>：无序列表 unordered list；block

. <li>：列表项，list item；block

. 元素彼此之间没有顺序

. 可以嵌套使用

. 可以使用点、方块、圆圈等不同的标记标识数据项

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

. <ul>默认有margin和padding，会破坏页面布局；通常取消其默认样式，再根据设计利用CSS重新指定样式，如：使用伪元素自定义列表标记

语法

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

类别	说明
type	disc：点 square：方块 circle：圆圈

样式初始化

. 以下示例均初始化列表样式

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

[ ] 默认使用点标识：会破坏页面布局

list1
list2
list3
list4
list5

[ ] 使用伪元素自定义标记样式

1. 使用普通字符

list1
list2
list3
list4
list5

.ul li::before {
    content: '>';
}

2. 使用 CSS 实体

list1
list2
list3
list4
list5

.ul li::before {
    content: '\21E8';
}

3. 使用背景图片

list1
list2
list3
list4
list5

.ul li {
    display: flex;
    align-items: center;
}

.ul li::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url(../imgs/logo1.png);
    background-size: cover;
    border-radius: 50%;
}

[ ] 导航设计 - 使用内部样式完善个人网站的锚点跳转

. hover时，使用文字下划线提示

. 后期使用伪元素可以设计更为丰富的效果，如伸缩、位移等

1. 使用导航标准结构 ul->li->a 调整个人网站

2. 初始化ul样式

3. 初始化a样式

4. 修改li样式：inline-block；填充padding

5. 其它样式设计

[ ]京东

[ ]二级导航

自定义列表 definition list

说明

. <dl>：自定义列表；block

. <dt>：定义列表项标题，definition title；block

. <dd>：定义列表项描述，definition description；block

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

. <dt>是对<dd>的总结或分类

. 各大门户网站底部的信息和版权等

. 也可以使用<ul>代替

[ ] 淘宝

. <dd>的子项<span>指定右边框

您是不是想找:: 口红书包新款外套拖鞋安踏女裤男手表阿玛尼男拖鞋床

[ ] 小米 - 关于

总结与作业 Summary & Homework

总结: 1. 有序列表<ol>的使用; 2. 无序列表<ul>的样式和使用; 3. 自定义列表<dl>的使用; 4. 列表的样式初始化; . <ol>、<ul>的子元素只能是<li>

. 实际开发中，多使用<ul>和<dl>

. 可以使用计数器为列表定制序号

. 过多使用技巧，请访问 list marker
作业: 1. 使用列表完善个人网站; 2. 筹备并完善自己的初始化样式表