列表的种类
在网页中的列表分为三种：无序列表(ul)、有序列表(ol)、自定义列表(dl)。
无序列表
无序列表用ul标签和li标签来表示，一个正确的未嵌套的无序列表如下：
<ul>
<li>第一个li</li>
<li>第二个li</li>
</ul>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<div>ul中的div</div>
</ul>
这种嵌套是不符合w3c标准的，用 The W3C Markup Validation Service 检测会报错。
如下：
但是在大部分浏览器中是可以正常显示的，我理解的是浏览器的容错能力强。
但是在li中是可以嵌套div的
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li><div>li中的div</div></li>
</ul>
检测一下是没有错误的
无序列表嵌套时应该
ul标签放在li标签之间
比如
<ul>
<li>第一层中第一个li</li>
<li>第一层中的第二个li
<ul>
<li>第二层中的第一个li</li>
<li>第二层中的第二个li
<ul>
<li>第三层中的第一个li</li>
</ul>
</li>
</ul>
</li>
<li>第一层中第三个li</li>
</ul>
效果如下：
有序列表
有序列表用ol标签和li标签表示，一个未嵌套的有序列表如下：
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
浏览器的默认显示会将有序列表以阿拉伯数字表示,并增加缩进
有序列表和无序列表的混合嵌套
<ol>
<li>第一层中第一个li</li>
<li>第一层中的第二个li
<ol>
<li>第二层中的第一个li</li>
<li>第二层中的第二个li
<ul>
<li>第三层中ul的第一个li</li>
</ul>
</li>
</ol>
</li>
<li>第一层中第三个li</li>
</ol>
效果如下：
列表的修饰
在无序列表和有序列表中，可以通过list-style-type属性、list-style-image属性以及list-style-position属性来修饰列表
list-style-type
list-style-type常用的值如下
<ol>
<li class="li_none">张三</li>
<li class="li_disc">李四</li>
<li class="li_decimal-leading-zero">王五</li>
<li class="li_lower-roman">赵六</li>
</ol>
<style type="text/css">
.li_none{
list-style-type: none;
}
.li_disc{
list-style-type: disc;
}
.li_decimal-leading-zero{
list-style-type: decimal-leading-zero;
}
.li_lower-roman{
list-style-type: lower-roman;
}
</style>
效果如下：
列表中的样式是放在容器中的左内边距里的，当设置左内边距为0时，样式会“消失”。
在样式中添加ul{padding-left:0}
效果如下：
list-style-image
当默认的样式不能满足需要时，可以利用list-style-image展示自己的图标样式。当list-style-image属性值为none或者属性值中URL的地址错误时，list-style-type属性会替代list-style-image
<style type="text/css">
li {
list-style-image:url("images/music.gif");
}
li.li_img_error {
list-style-image:url("../images/music.jpg");
}
li.li_img_no {
list-style-image:none;
}
</style>
<ul>
<li>list-style-image作用的列表</li>
<li class="li_img_error">list-style-image中错误的路径</li>
<li class="li_img_no">list-style-image中无图片修饰的列表</li>
</ul>
效果如下：
list-style-position
该属性主要用于设置列表样式的位置，属性值分别为outside和inside，其中inside为默认值
ul.inside {
list-style-position: inside
}
ul.outside {
list-style-position: outside
}
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>inside的li1</li>
<li>inside的li2</li>
<li>inside的li3</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>outsideli1</li>
<li>outsideli2</li>
<li>outsideli3</li>
</ul>
效果如下：
利用background添加样式
还有一种常用的样式修饰方式是利用background添加背景图。比如
ul{
list-style: none;
padding: 0;
}
ul li{
padding-left: 20px;
background:url(images/music.gif) no-repeat left center;
}
<ul>
<li>inside的li1</li>
<li>inside的li2</li>
<li>inside的li3</li>
</ul>
效果如下：
自定义列表
自定义列表以<dl>标签开始 每个自定义列表项以<dt>开始 每个自定义列表项的定义以<dd>开始。也可以理解为dl标签是自定义列表的集合，dt是自定义列表的标题，dd则是自定义列表的内容。自定义列表不仅仅是一列项目，更是项目及其注释的组合。
比如：
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
效果如下：
列表模式的导航
几乎在所有网页中导航是必不可少的，下面就利用列表写一个导航
单级列表的导航
<div class="site_nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">部门简介</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
刷新页面看下效果：
感觉好丑的说 为它添加CSS样式：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.site_nav{
width: 80px;
}
ul{
list-style: none;
}
li{
margin-bottom: 10px;
height: 24px;
}
li a{
font: normal 16px/1.5 "宋体";
text-align: center;
text-decoration: none;
display: block;
background-color: rgb(87,230,0);
color: #FFF;
}
li a:hover{
color: #000;
background-color: rgb(174,129,255);
}
</style>
这样之后效果就好多了:
有时候，我们想要让导航栏变为横向的，只需要简单修改CSS即可
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.site_nav{
width: 360px;
}
ul{
list-style: none;
}
li{
float: left;
width: 80px;
margin-right: 10px;
height: 24px;
}
li a{
font: normal 16px/1.5 "宋体";
text-align: center;
text-decoration: none;
display: block;
background-color: rgb(87,230,0);
color: #FFF;
}
li a:hover{
color: #000;
background-color: rgb(174,129,255);
}
</style>
刷新一下
带有嵌套的列表导航
上面两个例子只是单级列表的导航，但在实际中，鼠标移动到导航栏后会展示出二级导航栏，这就需要利用嵌套列表来实现
HTML代码如下：
<div class="site_nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">通知公告</a>
<ul class="ul_child">
<li><a href="#">最新通知</a></li>
<li><a href="#">最新公告</a></li>
</ul>
</li>
<li><a href="#">部门简介</a>
<ul class="ul_child">
<li><a href="#">组织机构</a></li>
<li><a href="#">领导组织</a></li>
<li><a href="#">部门职能</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
对刚才的CSS做一些修改：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 80px;
border-bottom: 1px solid #000;
}
.site_nav li{
position: relative;
}
.ul_child{
display:none;
position: absolute;
top: 0;
left: 79px;
}
li a{
height: 100%;
padding: 5px;
text-align: center;
text-decoration: none;
display: block;
background-color: rgb(87,230,0);
color: #FFF;
border: 1px solid #000;
border-bottom:0 none;
}
li a:hover{
color: #000;
background-color: rgb(174,129,255);
}
li:hover .ul_child{
display: block;
}
</style>
效果如下图：
我们也可以让它是横向的 保持HTML代码结构不变
修改CSS代码：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 320px;
border-right: 1px solid #000;
}
.site_nav li{
width: 80px;
height: 30px;
float: left;
position: relative;
}
ul:after{
clear: both;
visibility: hidden;
font-size: 0;
line-height: 0;
display: block;
content: "";
}
.ul_child{
display:none;
position: absolute;
top: 30px;
left: 0px;
width: 100%;
}
.ul_child li{
margin-top: -1px;
}
li a{
padding: 5px;
text-align: center;
text-decoration: none;
display: block;
background-color: rgb(87,230,0);
color: #FFF;
border: 1px solid #000;
border-right:0 none;
}
li a:hover{
color: #000;
background-color: rgb(174,129,255);
}
li:hover .ul_child{
display: block;
}
</style>
效果如下图所示：
周末去北京浪两天ε = = (づ′▽`)づ