CSS網頁布局入門教程10：帶當前標識的標籤式橫嚮導航

當前標識指使用者點擊該頻道或欄目，該欄目的標籤呈現出與其他標籤不同的顏色用以提示使用者所處的位置。
這種設計是網站設計中相當簡單而且是相當經典的一種增進網站可用性的方式。網站讓使用者使用時是應該考慮到使用者瀏覽的思考過程，糟糕的網頁設計只顧及頁面本身而不去考慮使用者感受，優秀的設計應當是以使用者為中心出發的，這樣一種簡單的目前通道的標識往往是許多設計師所忽略的內容，使用者需要知道自已的位置，以及知道自已還能去哪裡，通過對當前位置的標識，有助於讓使用者認清自己在網站中的方位，並引導使用者訪問其它頻道。
從上一篇中的代碼繼續編寫，為了讓某一個頻道成為一個當前所屬的頻道，這個頻道必須有一個和其它頻道不一樣的背景顏色或文字，但目前我們是針對所有的a標籤統一設定的背景，因此首要任務是設計一個例外情況，即目前通道，這樣一個特殊的頻道，我們對HTML中的標籤做一些修改：

<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，繼續看css部分的編寫，先為current這個id做個顏色設計：

#nav li a#current { background-color:#2788da; color:#fff;}

預覽一下效果，首頁的背景色已經變成藍色了<br /><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><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

繼續來完善我們的導航，頁菜單下加一條橫線

#nav { height:26px; border-bottom:2px solid #2788da;}

我們給ul標籤設定了高度，並且給它的底部加上了2px的實線，再次預覽一下效果，和我們當初想像的標籤式導航已經大同小異了，回到nav元素的定義，border-bottom是我們新加入的一個屬性，指的是元素的下邊框的設定，它的參數指的是2px的寬度、單實線樣式、顏色值為#2788da，通過這樣的設定，我們的ul標籤就擁有了2px帶色彩的下邊框。 xmlns="http://www.w3.org/1999/xhtml">

• 首頁
• DIV+CSS教程
• 常用代碼
• 水晶表徵圖
• 幻燈圖片
• 軟體下載
• CSS2.0實用手冊