列表排版目录
1 列表类型
HTML定义了有序列表（ol）、无序列表（ul）和定义列表（dl）三种不同的列表类型。有序列表为每个列表项用数字编号，通常表明列表项目的前后关系。无序列表以项目符号开头，通常与列表项目顺序无关。有序列表和无序列表是通过li标签定义列表项目。定义列表由一系列术语及其定义组成，dl创建定义列表，dt包含被定义的术语，dd用来包含定义，定义列表的模型。
1.1无序列表
<ul>
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
页面效果：
1.2 有序列表
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
页面效果：
1.3 自定义列表
<dl>
<dt>HTML</dt>
<dd>HTML是用来描述网页的一种语言。</dd>
<dt>CSS</dt>
<dd>CSS指层叠样式表 (Cascading Style Sheets),用来美化网页的</dd>
<dt>JavaScript</dt>
<dd>JavaScript 是脚本语言,是用来做网页特效的</dd>
</dl>
页面效果：
2 列表相关样式
2.1 list-style-type属性
list-style-type属性设定列表项目左边显示的项目符号类型，其值如下表所示：
| list-style-type属性值 | 列表符号说明 |
|---|---|
| none | 无标记。 |
| disc 默认 | 标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
2.2 list-style-image属性
list-style-image属性通过url指定列表项目的标记图片，会覆盖掉原有的项目符号，除非图片url无效或者无法显示，默认值为none。list-style-image无法控制标记图片显示的方式和位置，一般情况推荐使用li的背景图片background属性来实现列表符号的替代，图片位置通过background-postion来精确控制。
2.3 list-style-postion属性
list-style-postion属性控制列表符号位于li左边框的位置，其可能的值如下：
| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
3 无序列表在网页中的应用
3.1 应用无序列表的常见组件
无序列表在网页中应用是什么广泛的，网页中以下常见的组件通常情况下都是用无序列表实现的。
- 导航菜单项
- 文章标题列表
- 排行榜
- 购物网站的商品弄表
- 热点新闻
- ……
3.2 新闻列表的实现
3.2.1 编写HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信工院</title>
<link rel="stylesheet" href="css/list.css" />
</head>
<body>
<div class="wrap">
<ul class="news_list">
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-10-08]</span>
</li>
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-09-30]</span>
</li>
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-07-26]</span>
</li>
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-07-26]</span>
</li>
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-07-26]</span>
</li>
<li>
<a href="#">信息工程学院</a>
<span class="time">[2019-07-26]</span>
</li>
</ul>
</div>
</body>
</html>
3.2.2编写CSS样式
body,ul,li,a,span{
/* 取消默认边距和填充 */
margin: 0;
padding: 0;
}
ul{
list-style-type: none;/* 取消无序列表符号 */
}
a{
color: #333; /* 超链接深灰色 */
text-decoration: none;/* 超链接取消下划线 */
}
a:hover{
color: #298bd4;/* 超链接鼠标悬停时文字颜色 */
}
.wrap{
width:1400px;
margin: 0 auto;/* 列表容器页面水平居中对齐 */
border:1px solid #e5e5e5;
padding: 15px;/* 列表内容四周距边框线15像素填充 */
}
.news_list{
font-size: 16px;
line-height: 36px;/* 定义列表项高度 */
}
.news_list li{
/* 列表项相对定位,为.time类样式提供定位祖先元素 */
position: relative;
/* 列表符号使用背景图片并定义垂直偏移量 */
background:url(../images/list-ico.jpg) left 10px no-repeat;
padding-left: 15px; /* 列表文字左侧15像素避免跟列表背景图像重叠 */
padding-right: 150px;/* 右填充为列表时间.time提供显示空间 */
}
.news_list li .time{
position: absolute;
right:0;
top: 0;
color: #9e9e9e;
}
