列表
列表就相当于去超市购物时的购物清单
在HTML中也可以创建列表,在网页中共有三种列表:
无序列表
- 使用
<ul></ul>
标签来创建一个无序列表 - 使用
<li></li>
标签在ul
中创建一个个列表项,一个<li></li>
就是一个列表项 - 通过
type
属性可以修改无序列表的项目符号
可选值:disc
,实心圆点(默认值)square
,实心方块circle
,空心圆圈
PS:默认的项目符号我们一般不使用!因为在不同浏览器的效果千差万别,我们在开发过程中希望用户看到的效果不因为外在环境而存在差异。如果需要设置项目符号,则可以采用为
li
设置背景图片的方式来设置,这样可以确保不同浏览器中样式的统一。ul
li
都是块元素。
有序列表
- 使用
<ol></ol>
标签来创建一个有序列表 - 使用
<li></li>
标签在ol
中创建一个个列表项,一个<li></li>
就是一个列表项 - 通过
type
属性可以修改有序列表的项目符号
可选值:1
,使用阿拉伯数字作为序号(默认值)a
或A
,采用小写字母或大写字母作为序号i
或I
,采用小写或大写的罗马数字作为序号
ol也是块元素。
去除项目符号的CSS写法:list-style: none;
定义列表
定义列表用来对一些词汇或者内容进行定义
使用 <dl></dl>
来创建一个定义列表。dl
中有两个子标签:
dt
:被定义的内容dd
:对被定义内容的描述
例:<dl> <dt>武松</dt> <dd>景阳冈打虎英雄,战斗力99</dd> <dd>后打死西门庆,投奔梁山</dd> <dt>武大</dt> <dd>知名餐饮企业家,战斗力1</dd> </dl>
同样的,
dl
和ul
、ol
之间可以互相嵌套
列表嵌套
列表之间都是可以互相嵌套的,可以在无序列表中放置有序列表,也可以在有序列表中放置无序列表。
例:
<p>菜谱</p>
<ul>
<li>
糖醋排骨
<ol>
<li>糖</li>
<li>醋</li>
<li>排骨</li>
</ol>
</li>
<li>
椒盐玉米
<ol>
<li>椒</li>
<li>盐</li>
<li>玉米</li>
</ol>
</li>
<li>
青椒肉丝
<ol>
<li>青椒</li>
<li>肉丝</li>
</ol>
</li>
</ul>
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/23.html