Chapter 6 列表的样式&导航栏

基本的列表样式

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>

图像映射

目标：鼠标点击图片的某个部分，可以直接跳转