基本的列表樣式
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 >Baidu</a></li>
<li><a >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 >Baidu</a></li>
<li><a >Luowang</a></li>
</ul>
</body>
</html>
</pre>
以上的代碼有個問題席楚，在兩個鏈接上，上面元素的bottom線會和下面元素的top線重合畏浆，怎么解決胆胰？
- 只設(shè)置border-top屬性，最后一個元素加上一個單獨(dú)的id,對其設(shè)置border-bottom
- 有些瀏覽器支持last-child偽類
水平顯示列表
多加一個屬性刻获，讓<li>float
<pre> ul li{
float: left;
}</pre>
背景圖像
可以設(shè)置圖像蜀涨，repeat-y
滑動門技術(shù)，設(shè)置top兩個圓角蝎毡，bottom方角
下拉菜單
可用JS實(shí)現(xiàn)厚柳，這里使用純CSS技術(shù)，Patrick Griffiths的Suckerfish菜單
原理：子導(dǎo)航欄嵌套在無序列表顶掉，列表定位到屏幕外草娜，當(dāng)鼠標(biāo)懸停在父列表時，重新定位它痒筒。
<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; /*關(guān)鍵點(diǎn)宰闰！hover時，出現(xiàn)*/
}
ul.nav a{
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<ul class=nav>
<li><a >Baidu</a>
<ul>
<li><a >網(wǎng)易</a></li>
</ul>
</li>
<li><a >Luowang</a></li>
</ul>
</body>
</html>`
</pre>
圖像映射
目標(biāo)：鼠標(biāo)點(diǎn)擊圖片的某個部分簿透，可以直接跳轉(zhuǎn)
