HTML 支持3种不同的列表:有序列表、无序列表、自定义列表
1. 有序列表
<ol>定义有序列表,order list 的缩写,默认以数字显示排序 。<li>定义列表选项,list item 的缩写。type 属性有五个属性值:1、a、A、i、I,只能从五个中选择一种,其余的都不会识别,会按照默认的数字排列start 属性表示从type类型的第几个数字开始,可以取负数
<style>
ol{
border: 1px dashed black;
display: block;
float: left;
}
</style>
<body>
<ol type="1" start="-1">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ol>
<ol type="a" start="6">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ol>
<ol type="i" start="4"> <!-- 这里的 i 是小写字母,页面识别为罗马数字 -->
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ol>
<ol type="I" start="-1"> <!-- 这里的 I 是大写字母,页面识别为罗马数字 -->
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ol>
</body>
2. 无序列表
<ul>unordered list 的缩写,表示无序列表。默认情况下,无序列表的每一项都使用实心圆符号表示<li>表示列表中的每一项type 属性四个值,disc(默认)、circle、square、none
<style>
ul{
border: 1px dashed lightgreen;
display: block;
float: left;
}
</style>
<body>
<ul type="disc">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ul>
<ul type="circle">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ul>
<ul type="square">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ul>
<ul type="none">
<li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
</ul>
</body>
3.自定义列表
<dl>definition list 缩写,表示定义列表<dt>definition term 缩写,表示定义术语,也就是我们常说的定义标题,一般情况下,每个定义标题都会对应若干条定义描述<dd>definition description 缩写,表示定义描述。定义描述一般是对定义标题的解释说明,<dt>和<dd>个数没有限制,在使用中常是一个<dt>对应多个<dd>。- 自定义列表没有前缀符号,但有缩进
<style>
dt,dd{
width: 200px;
border: 1px solid green;
}
.d1,.d2{
float: left;
}
</style>
<body>
<dl>
<div class="d1">
<dt>SERVICES</dt>
<dd>home services</dd>
<dd>school services</dd>
<dd>company services</dd>
</div>
<div class="d2">
<dt>CONTACT</dt>
<dd>home contact</dd>
<dd>school contact</dd>
<dd>company contact</dd>
</div>
</dl>
</body>
列表属性
list-style-type定义列表符号:disc 实心圆、circle 空心圆、square 实心正方形、nonelist-style-image将图片设置为列表符号:urllist-style-position列表符号的放置位置:outside、insidelist-style简写,常用 list-style:none;