主頁(yè) > 知識(shí)庫(kù) > CSS網(wǎng)頁(yè)布局入門(mén)教程10：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш?/div>

CSS網(wǎng)頁(yè)布局入門(mén)教程10：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш?/h1>

當(dāng)前標(biāo)識(shí)指用戶點(diǎn)擊該頻道或欄目，該欄目的標(biāo)簽呈現(xiàn)出與其他標(biāo)簽不同的顏色用以提示用戶所處的位置。
這種設(shè)計(jì)是網(wǎng)站設(shè)計(jì)中相當(dāng)簡(jiǎn)單而且是相當(dāng)經(jīng)典的一種增進(jìn)網(wǎng)站可用性的方式。網(wǎng)站讓用戶使用時(shí)是應(yīng)該考慮到用戶瀏覽的思考過(guò)程，糟糕的網(wǎng)頁(yè)設(shè)計(jì)只顧及頁(yè)面本身而不去考慮用戶感受，優(yōu)秀的設(shè)計(jì)應(yīng)當(dāng)是以用戶為中心出發(fā)的，這樣一種簡(jiǎn)單的當(dāng)前頻道的標(biāo)識(shí)往往是許多設(shè)計(jì)師所忽略的內(nèi)容，用戶需要知道自已的位置，以及知道自已還能去哪里，通過(guò)對(duì)當(dāng)前位置的標(biāo)識(shí)，有助于讓用戶認(rèn)清自己在網(wǎng)站中的方位，并引導(dǎo)用戶訪問(wèn)其它頻道。
從上一篇中的代碼繼續(xù)編寫(xiě)，為了讓某一個(gè)頻道成為一個(gè)當(dāng)前所屬的頻道，這個(gè)頻道必須有一個(gè)和其它頻道不一樣的背景顏色或文字，但目前我們是針對(duì)所有的a標(biāo)簽統(tǒng)一設(shè)置的背景，因此首要任務(wù)是設(shè)計(jì)一個(gè)例外情況，即當(dāng)前頻道，這樣一個(gè)特殊的頻道，我們對(duì)HTML中的標(biāo)簽做一些修改：

  ul id="nav">
    li id="current">a href="/index.asp">主頁(yè)/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">水晶圖標(biāo)/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實(shí)用手冊(cè)/a>/li>
  /ul>

我們?cè)诘谝粋€(gè)a標(biāo)簽中加入了一個(gè)新的id，名為current，繼續(xù)看css部分的編寫(xiě)，先為current這個(gè)id做個(gè)顏色設(shè)計(jì)：

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

預(yù)覽一下效果，首頁(yè)的背景色已經(jīng)變成藍(lán)色了

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

繼續(xù)來(lái)完善我們的導(dǎo)航，頁(yè)菜單下加一條橫線

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

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

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

簡(jiǎn)單的標(biāo)簽式的導(dǎo)航通過(guò)一組css的設(shè)計(jì)就算完成了，每當(dāng)換一個(gè)頻道頁(yè)面時(shí)，只需要將id="current"移動(dòng)到當(dāng)前頻道所在的a元素中，即可完成顏色的切換。不需要重俗人編寫(xiě)顏色屬性，而且需要修改進(jìn)也可以方便在css中修改完成。

有關(guān)本例中應(yīng)用XHTML中元素間的CSS屬性繼承的問(wèn)題。
何為繼承呢？繼承指的是每一個(gè)元素可以有多個(gè)樣式，在普通情況下，他遵守最外層的樣式設(shè)計(jì)，如果遇到對(duì)其自身的樣式設(shè)計(jì)，他將繼承外層樣式的基礎(chǔ)上，優(yōu)先考慮自身的樣式。
如果內(nèi)層的樣式和外層的樣式有沖突，則最終顯示的是內(nèi)層的樣式效果。

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

標(biāo)簽：遼源邯鄲濱州東莞陽(yáng)泉海東南充喀什

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS網(wǎng)頁(yè)布局入門(mén)教程10：帶當(dāng)前標(biāo)識(shí)的標(biāo)簽式橫向?qū)Ш健罚疚年P(guān)鍵詞 CSS,網(wǎng)頁(yè),布局,入門(mén)教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。