<ul id="nav"> <li id="current"><a href="/index.asp">主頁</a></li> <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li> <li><a href="/Sort/List_5.html">常用代碼</a></li> <li><a href="/Sort/List_6.html">水晶圖標</a></li> <li><a href="/Sort/List_7.html">幻燈圖片</a></li> <li><a href="/Sort/List_10.html">軟件下載</a></li> <li><a href="/css2/">CSS2.0實用手冊</a></li> </ul>
我們在第一個a標簽中加入了一個新的id，名為current，繼續(xù)看css部分的編寫，先為current這個id做個顏色設(shè)計：
#nav li a#current { background-color:#2788da; color:#fff;}預(yù)覽一下效果，首頁的背景色已經(jīng)變成藍色了
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主頁</li>
<li>DIV+CSS教程</li>
<li>常用代碼</li>
<li>水晶圖標</li>
<li>幻燈圖片</li>
<li>軟件下載</li>
<li>CSS2.0實用手冊</li>
</ul>繼續(xù)來完善我們的導航，頁菜單下加一條橫線
#nav { height:26px; border-bottom:2px solid #2788da;}我們給ul標簽設(shè)置了高度，并且給它的底部加上了2px的實線，再次預(yù)覽一下效果，和我們當初想像的標簽式導航已經(jīng)大同小異了，回到nav元素的定義，border-bottom是我們新加入的一個屬性，指的是元素的下邊框的設(shè)置，它的參數(shù)指的是2px的寬度、單實線樣式、顏色值為#2788da，通過這樣的設(shè)置，我們的ul標簽就擁有了2px帶色彩的下邊框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主頁</li>
<li>DIV+CSS教程</li>
<li>常用代碼</li>
<li>水晶圖標</li>
<li>幻燈圖片</li>
<li>軟件下載</li>
<li>CSS2.0實用手冊</li>
</ul>
</body>
</html>簡單的標簽式的導航通過一組css的設(shè)計就算完成了，每當換一個頻道頁面時，只需要將id="current"移動到當前頻道所在的a元素中，即可完成顏色的切換。不需要重俗人編寫顏色屬性，而且需要修改進也可以方便在css中修改完成。
有關(guān)本例中應(yīng)用XHTML中元素間的CSS屬性繼承的問題。
何為繼承呢？繼承指的是每一個元素可以有多個樣式，在普通情況下，他遵守最外層的樣式設(shè)計，如果遇到對其自身的樣式設(shè)計，他將繼承外層樣式的基礎(chǔ)上，優(yōu)先考慮自身的樣式。
如果內(nèi)層的樣式和外層的樣式有沖突，則最終顯示的是內(nèi)層的樣式效果。
本例中還接觸到一個新的屬性：list-style:none;在預(yù)覽用的樣式代碼內(nèi)。
在默認情況下，ul內(nèi)的li列表形式前邊帶有圓點的，從以前的章節(jié)可以看到。本句的意思是去掉前邊默認的圓點。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
