基本的列表样式
1、修改列表的属性
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul.nav{
margin: 0;
padding: 0;
list-style-type: none;
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
</style>
</head>
<body>
<ul class=nav>
<li><a href="http://www.baidu.com/">Baidu</a></li>
<li><a href="http://www.google.com/">Google</a></li>
</ul>
</body>
</html>
</pre>
2、修改链接的属性
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul{
list-style-type: none;
}
ul.nav a{
display: block;
color: #2B3F00;
text-decoration: none;
border-top: 1px solid steelblue;
border-bottom: 1px solid #486B02;
padding: 0.3em 1em;
width: 80px;
text-align: center;
line-height: 1.4em;
}
</style>
</head>
<body>
<ul class=nav>
<li><a href="http://www.baidu.com/">Baidu</a></li>
<li><a href="http://www.luoo.net/">Luowang</a></li>
</ul>
</body>
</html>
</pre>
以上的代码有个问题，在两个链接上，上面元素的bottom线会和下面元素的top线重合，怎么解决？
- 只设置border-top属性，最后一个元素加上一个单独的id,对其设置border-bottom
- 有些浏览器支持last-child伪类
水平显示列表
多加一个属性，让<li>float
<pre> ul li{
float: left;
}</pre>
背景图像
可以设置图像，repeat-y
滑动门技术，设置top两个圆角，bottom方角
下拉菜单
可用JS实现，这里使用纯CSS技术，Patrick Griffiths的Suckerfish菜单
原理：子导航栏嵌套在无序列表，列表定位到屏幕外，当鼠标悬停在父列表时，重新定位它。
<pre>
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
ul.nav,ul.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
float: left;
/*border-bottom: 1px solid #486B02;*/
background-color: #8BD400;
}
ul.nav li{
float: left;
width: 8em;
background-color: #8BD400;
}
ul.nav li ul{
width: 8em;
position: absolute;
left: -999em; /*隐藏下拉菜单*/
}
.nav li:hover ul{
left:auto; /*关键点！hover时，出现*/
}
ul.nav a{
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<ul class=nav>
<li><a href="http://www.baidu.com/">Baidu</a>
<ul>
<li><a href="http://www.163.com/">网易</a></li>
</ul>
</li>
<li><a href="http://www.luoo.net/">Luowang</a></li>
</ul>
</body>
</html>`
</pre>
图像映射
目标：鼠标点击图片的某个部分，可以直接跳转
网友评论