什么是列表
列表是数据或信息展示的一种方式,与任何其它形式相比,为数据或信息展示提供直观的理解,例如,购物清单以列表形式展示,而不是用段落格式将每个商品用逗号分开,则购物清单让人看起来一目了然。

HTML列表
如果你要显示的数据是某物的集合, 使用列表让用户理解信息的绝佳选择。html列表有三种分别是有序,无序和定义列表。无序列表始于ul标签,每个列表项始于li。有序列表始于ol标签,每个列表项始于li标签。定义列表始于<dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始。
列表类型
在HTML通常有三种表示列表的方式。
- 有序列表
- 无序列表
- 定义列表
什么是有序列表
有序列表是按确定顺序展示项目,例如,当展示的数据或信息需要按顺序显示时才有意义的,用有序列表展示该信息是最佳选择。
例如:食谱制作说明,编写一个简单程序。此类信息必须以有序列表的形式展示, 如果不是,则信息将失去其想要的实际含义。有序列表也称为编号列表。
有序列表用 <ol> 标签和<li>标签表示用于列出有序列表中的项目。
有序列表HTML代码
<ol>
<li>在锅里加水;</li>
<li>加入糖,茶叶和香料;</li>
<li>煮沸并煮一分钟左右;</li>
<li>加入牛奶;</li>
<li>煮滚,小火煮3-5分钟;</li>
<li>在茶壶中过滤茶。</li>
</ol>
有序列表效果演示
See the Pen qBEKLjK by Peter (@linyongmin) on CodePen.default
修改有序列表默认值为upper-alpha
有序列表的列表项标记的默认样式为十进制数,我们可以使用列表的列表项标记的CSS的list-style-type属性来更改列表的样式。
list-style-type :upper-alpha;
HTML:
<ol>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
</ol>
CSS :
ol {
list-style-type:upper-alpha;
}
修改有序列表默认值为upper-alpha效果演示
See the Pen customise-list-style-type-upper-alpha by Peter (@linyongmin) on CodePen.default
list-style-type :upper-roman;
HTML :
<ol>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
</ol>
CSS :
ol {
list-style-type:upper-roman
}
修改有序列表默认值为upper-roman效果演示
See the Pen customise-list-style-type-upper-roman by Peter (@linyongmin) on CodePen.default
以上是list-style-type最常用属性值,还有其它许多列表的属性值,在下面列表样式类型部分中介绍。
什么是无序列表
无序列表不一定是按特定顺序排列的项目列表,也称为项目符号列表,例如:购物清单,待办事项清单等。无序列表用 <ul> 标签和<li>标签标记列表项目。
HTML :
<ul>
<li>衣服</li>
<li>书</li>
<li>笔</li>
<li>手提电脑</li>
<li>包</li>
</ul>
无序列表效果演示
See the Pen html-unorder-list by Peter (@linyongmin) on CodePen.default
无序列表默认样式
无序列表项标记的默认样式类型是disc。你可以使用无序列表的列表项标记的CSS的list-style-type属性更改列表的样式。
list-style-type: circle;
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
</ul>
CSS :
ul {
list-style-type:circle;
}
修改无序列表默认值为circle效果演示
See the Pen customise-list-style-type-circle by Peter (@linyongmin) on CodePen.default
list-style-type: square
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
</ul>
CSS :
ul {
list-style-type:square;
}
修改无序列表默认值为square效果演示
See the Pen customise-list-style-type-square by Peter (@linyongmin) on CodePen.default
list-style-type: disc
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
</ul>
CSS :
ul {
list-style-type:disc;
}
修改无序列表默认值为disc效果演示
See the Pen customise-list-style-type-disc by Peter (@linyongmin) on CodePen.default
什么是定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合, 其中列表项包含两个元素,第一个是术语,第二个是描述,也称为描述列表。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表样例样例
HTML:
<dl>
<dt>北京</dt>
<dd>中国首都</dd>
<dt>华盛顿</dt>
<dd>美国首都</dd>
</dl>
定义列表效果演示
See the Pen html-definition-lists by Peter (@linyongmin) on CodePen.default
什么是嵌套列表
有时候我们需要在列表项中展示列表项,像这种列表中用列表的结构展示叫嵌套列表。
嵌套列表样例演示
HTML:
<ul>
<li>第一章
<ol>
<li>第一节</li>
<li>第二部分</li>
<li>第三部分</li>
<li>第四部分</li>
</ol>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二部分</li>
<li>第三部分</li>
<li>第四部分</li>
</ul>
</li>
<li>第三章</li>
<li>第四章</li>
</ul>
嵌套列表效果演示
See the Pen html-nested-lists by Peter (@linyongmin) on CodePen.default
设置列表样式
我们可以使用以下三个CSS属性来设置列表样式。
list-style-type
本文开始已经做过解释,列表样式类型( list-style-type )是CSS属性,用于对列表项符号进行样式设置。
这个属性有以下这些值:
- disc
- square
- circle
- decimal
- lower-alpha
- lower-roman
- lower-latin
- lower-greek
- upper-alpha
- upper-roman
- upper-latin etc…
这是list-style-type属性值的完整列表。
list-style-image
list-style-image用于将图像设置为列表符号。此属性有两个值,一个是image的url,第二个是none。
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
<li>项目清单5</li>
</ul>
CSS :
ul {
list-style-image:url('https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg');
}
修改列表符号为图像效果演示
See the Pen set-up-list-style-image by Peter (@linyongmin) on CodePen.default
list-style-image值为none效果
ul {
list-style-image:none;
}
list-style-image设置为none显示默认的列表符号。
See the Pen set-up-list-style-image-none by Peter (@linyongmin) on CodePen.default
list-style-position
list-style-position是CSS属性设置列表项符号相对列表项的位置,列表样式位置具有两个值: inside和outside。
属性值:inside
列表样式符号是列表项内容中的第一个元素。
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
<li>项目清单5</li>
</ul>
CSS :
ul {
list-style-position:inside;
}
li {
background-color:red;
}
修改列表符号位置为inside效果演示
See the Pen set-up-list-style-position-inside by Peter (@linyongmin) on CodePen.default
属性值: outside
列表项符号在列表框之外。
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
</ul>
CSS :
ul {
list-style-position:outside;
}
li {
background-color:red;
}
修改列表符号位置为outside效果演示
See the Pen set-up-list-style-position-outside by Peter (@linyongmin) on CodePen.default
关于列表颜色
现在是时候学习修改列表中的颜色了,无序列表项和符号添加彩色。
第一种情况:列表项和列表项符号的颜色相同
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
<ul>
CSS :
ul {
color:red;
}
修改无序列表颜色效果演示
See the Pen customise-list-colorr by Peter (@linyongmin) on CodePen.default
第二种情况:无序列表项和列表项符号的颜色不同
HTML:
<ul>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
<ul>
CSS :
ul {
list-style-type:none;
color:blue;
}
li::before {
content: "\2022";
color: red;
display: inline-block;
width: 1rem;
margin-left: -1rem;
}
修改无序列表项和列表项符号效果演示
See the Pen customise-list-item-mark-color by Peter (@linyongmin) on CodePen.default
编号列表添加颜色,现在是时候给数字列表上色了。
第一种情况:列表项和列表项符号的颜色相同
HTML:
<ol>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
</ol>
CSS :
ol {
color: red;
}
修改有序列表颜色效果演示
See the Pen customise-order-list-color by Peter (@linyongmin) on CodePen.default
第二种情况:有序列表项和列表项符号的颜色不同
HTML:
<ol>
<li>项目清单1</li>
<li>项目清单2</li>
<li>项目清单3</li>
<li>项目清单4</li>
</ol>
CSS :
ol {
list-style-type:none;
color:green;
counter-reset:li
}
li::before{
content: counter(li)'.';
color: red;
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
text-align: right;
direction: ltr
}
li {counter-increment: li}
修改有序列表项和列表项符号效果演示
See the Pen customise-order-list-item-mark-color by Peter (@linyongmin) on CodePen.default
这是一篇有关html与css中的列表教程,详细介绍列表类型,列表样式, 定义列表。如果关于html列表和样式的问题,欢迎联系博主。
转载请注明:林雍岷 » 3. 有关html与css中的列表教程