CSS导航栏实例详解
效果：
代碼：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">小兔子</a></li>
<li><a href="#news">小狗狗</a></li>
<li><a href="#contact">小貓咪</a></li>
<li><a href="#about">小老虎</a></li>
</ul>
</body>
</html>
代價解釋：
ul標簽定義列表，li是列表中的項，每個列表項包括一個鏈接（<a>標簽）；
ul{}部分：
? ? 定義列表樣式-無；
? ? 外邊距-0;
? ? 內邊距-0;
a:link,a:visited{}部分：（a:link-未訪問的鏈接，a:visited-已訪問的鏈接；）
塊級元素 - 占據一定矩形空間；
設置字體粗細 - 粗體；
顏色；
背景顏色；
寬度；
文本中間對齊；
內邊距4px;
文本修飾-標準；
文本大小寫狀態-大寫；（對中文無意義）
a:hover,a:active{}部分：（a:hover-鼠標懸停在鏈接上，a:active-被選擇的鏈接；）
背景色；
總結
以上是生活随笔為你收集整理的CSS导航栏实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS表格实例详解
- 下一篇： CSS图片廊实例详解