CSS 制作網頁導航條(下)

2024-07-11 08:26:55

字體：大中小

來源：轉載

供稿：網友

上節課我們將導航條做成了下面的效果

但是此時的導航條還沒有鏈接，還不能點擊，這節課我們就要做一個完整的導航條
【第四步】
我們需要將上面的導航條做以下幾個修改
1）給上面的導航加上鏈接；
2）鏈接文字大小修改為12px;
3）并且規定鏈接樣式，鼠標移上去和拿開的效果

修改方法如下
1）導航加鏈接，HTML代碼如下：

復制代碼

代碼如下:
<div id="nav">
<ul>
<li><a href="#">CSS學習</a></li>
<li><a href="#">學前準備</a></li>
<li><a href="#">入門教程下載</a></li>
<li><a href="#">提高教程</a></li>
<li><a href="#">布局基礎教程</a></li>
<li><a href="#">精彩應用</a></li>
</ul>
</div>

2) 文字大小12像素，CSS代碼如下

復制代碼

代碼如下:
a{font-size:12px;}

3）鼠標移動上面和拿開效果

復制代碼

代碼如下:
#nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}

效果是不是和下面一樣，鼠標移上去變成白色的有下劃線的鏈接

到這里，基本上一個導航條就出來了~不過為了能讓大家再提高一個層次，KwooJan就幫大家對上面的導航條進行一下修改，算是拋磚引玉！
我希望鼠標移上去后，鏈接的背景變成黑色的，下面是我的步驟
首先把鏈接a加上一個背景，以方便看出來鏈接a的區域

復制代碼

代碼如下:
#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

怎么樣，知道a的區域了吧

現在我要將a的高度設定為35px和盒子一樣高度，這樣我在把剛才的亮藍色背景就可以完全覆蓋下面盒子的灰色了
于是我插入下面紅色的代碼：

復制代碼

代碼如下:
#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}

可是不管我怎么刷新瀏覽器，高度都沒有任何變化，這是為什么呢？！
原因就在于a屬于內聯元素，內聯元素是無法設置寬度和高度的，width和height只是針對塊狀元素，說道這里，解決辦法就出來了，只要我們把內聯元素a轉化成塊狀元素就可以了，我們用“display:block;”將內聯元素轉化成塊狀元素。大家先不要加這段代碼，閉上眼想想界面會變成什么樣子？

上一篇：CSS 控制頁面樣式的4種方式和優先級問題

下一篇：xHTML+CSS與SEO的關系