1. 有序列表
ul: 标签用于定义无序列表。
li:标签用于定义列表中的项目。
<ul>
<li>
刘在石
</li>
<li>
宋智孝
</li>
<li>
李光洙
</li>
</ul>
2.无序列表
ol:标签用于定义有序列表。
ol元素的三个属性:
1.reversed:规定列表顺序为降序。
2.start :规定有序列表的起始值。
3.type:规定在列表中使用的标记类型。常见类型:1、A、a、I、i
<ol type="A" reversed>
<li>
刘在石
</li>
<li>
宋智孝
</li>
<li>
李光洙
</li>
</ol>
3.嵌套列表
有序、无序可以互相嵌套
<ul>rm
<li>成员
<ol>
<li>
7012
</li>
<li>
cuigu
</li>
</ol>
</li>
<li>
<ul>
<li>
9012
</li>
<li>
jiangjiang
</li>
</ul>
4.定义列表
dl: 标签定义了一个包含术语定义以及描述的列表。
dt:标签用于定义列表中的项目(即术语部分)。
dd: 标签用于定义列表中项目的描述部分
<dl>
<dt>
刘在石
</dt>
<dd>
国民MC
</dd>
</dl>
css的两个有关list的属性
1.list-style-type:可设置列表的样式:方的、圆的、无等等
css代码
<style>
ul.a {
list-style-type: square;
}
ul.b {
list-style-type: circle;
}
ul.c {
list-style-type: disc;
}
ul.d {
list-style-type: none;
}
</style>
<ul class="a">
<li>
haha
</li>
<li>
金钟国
</li>
<li>
池石镇
</li>
</ul>
<ul class="b">
<li>
haha
</li>
<li>
金钟国
</li>
<li>
池石镇
</li>
</ul>
<ul class="c">
<li>
haha
</li>
<li>
金钟国
</li>
<li>
池石镇
</li>
</ul>
<ul class="d">
<li>
haha
</li>
<li>
金钟国
</li>
<li>
池石镇
</li>
</ul>
效果
2.list-style-image:可设置列表前面的为图片
css代码
ul.img {
list-style-image: url("list.jpg");
}
<ul class="img">
<li>
西瓜
</li>
<li>
草莓
</li>
<li>
龙眼
</li>
</ul>
效果
能看到前面都是自己添加的图片,可以按自己的喜好设置图片,以及图片大小