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

2020-10-23 18:39:21

字體：大中小

來源：轉載

供稿：網友

當前標識指用戶點擊該頻道或欄目，該欄目的標簽呈現出與其他標簽不同的顏色用以提示用戶所處的位置。
這種設計是網站設計中相當簡單而且是相當經典的一種增進網站可用性的方式。網站讓用戶使用時是應該考慮到用戶瀏覽的思考過程，糟糕的網頁設計只顧及頁面本身而不去考慮用戶感受，優秀的設計應當是以用戶為中心出發的，這樣一種簡單的當前頻道的標識往往是許多設計師所忽略的內容，用戶需要知道自已的位置，以及知道自已還能去哪里，通過對當前位置的標識，有助于讓用戶認清自己在網站中的方位，并引導用戶訪問其它頻道。
從上一篇中的代碼繼續編寫，為了讓某一個頻道成為一個當前所屬的頻道，這個頻道必須有一個和其它頻道不一樣的背景顏色或文字，但目前我們是針對所有的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;}

預覽一下效果，首頁的背景色已經變成藍色了

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

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

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

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執行]

簡單的標簽式的導航通過一組css的設計就算完成了，每當換一個頻道頁面時，只需要將id="current"移動到當前頻道所在的a元素中，即可完成顏色的切換。不需要重俗人編寫顏色屬性，而且需要修改進也可以方便在css中修改完成。

有關本例中應用XHTML中元素間的CSS屬性繼承的問題。
何為繼承呢？繼承指的是每一個元素可以有多個樣式，在普通情況下，他遵守最外層的樣式設計，如果遇到對其自身的樣式設計，他將繼承外層樣式的基礎上，優先考慮自身的樣式。
如果內層的樣式和外層的樣式有沖突，則最終顯示的是內層的樣式效果。

本例中還接觸到一個新的屬性：list-style:none;在預覽用的樣式代碼內。
在默認情況下，ul內的li列表形式前邊帶有圓點的，從以前的章節可以看到。本句的意思是去掉前邊默認的圓點。

上一篇：CSS網頁布局入門教程11：帶當前標識的標簽式橫向導航圖片美化版

下一篇：CSS網頁布局入門教程9：用CSS設計網站導航――橫向導航