CSS混沌初開V：側(cè)邊欄導(dǎo)航菜單的實現(xiàn)
首先對教程的第四部分作一點補充。有人建議Blog的標題最好使用H1標簽，以文本的形式表現(xiàn)標題內(nèi)容，原因是不論是在CSS關(guān)閉的情況下，還是對于搜索引擎的抓取，H1標簽結(jié)合文本的形式都具有更好的可訪問性。這個提議很有道理，很多人也是這么做的，所以我也建議大家對之前的代碼進行調(diào)整。
若使用H1標簽來實現(xiàn)Blog標題，又想保持原來標題位置的圖片的話，那么就有必要了解一下CSS中很經(jīng)典的圖像替換文本技術(shù)。簡單點說就是在XHTML中包含了文本，并為其設(shè)置背景圖片，但是要通過CSS“隱藏”文本而僅僅顯示背景圖片。若你對這個技術(shù)不是很了解，本站也有一篇專門關(guān)于 圖像替換文本技術(shù) 的文章，希望對你有所幫助。
圖像替換文本技術(shù)
這個技術(shù)有時候我們也稱之為文本替換或圖像替換，其強調(diào)的核心是在HTML代碼中我們使用文本，然后通過一些方法將文本“隱藏”，而僅顯示背景或其它形式的圖片，這樣在保證可訪問性的同時，也使得頁面因圖像的應(yīng)用而更加美觀。比如我們可以將圖片設(shè)置為背景，讓后利用text-indent使文本有足夠的縮進實現(xiàn)隱藏，代碼如下：
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
其中的width和height是必須定義的，且需和背景圖片的尺寸保持一致。text-align: center被轉(zhuǎn)移到了body標簽中，這樣頁面中所有的內(nèi)容都被定義為居中顯示，而那些不需要居中的內(nèi)容，如文章正文，我們可以再添加text-align: left進行覆蓋。當然對于外圍容器而言，我們利用margin: 0px auto使其在水平方向上保持在頁面的中部。
導(dǎo)航菜單的實現(xiàn)
首先定義導(dǎo)航外圍容器的樣式：
#left {
width: 178px;
}
現(xiàn)在外圍容器我們只要簡單的定義其寬度，并賦予left的id名。在left容器中，我們添加一個名為navcontainer的子容器來放置導(dǎo)航菜單。實現(xiàn)導(dǎo)航的標簽推薦使用無序列表ul，通過CSS我們可以改變其外觀和形式。HTML結(jié)構(gòu)如下：
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">ximicc</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

ul和li標簽構(gòu)建了一個簡單的項目列表，其項目符號默認為小圓點，這是我們不需要的。利用CSS可以去掉那些小圓點，并用背景圖片的形式替換以我們制作好的圖標：

#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
第一段代碼還是定義導(dǎo)航容器的寬度，其值與left容器相同。第二段代碼主要用于改變列表的外觀，margin和padding確保導(dǎo)航項目的周圍沒有空隙，并去除了列表項默認的縮進，list-style-type則定義了列表的項目符號為無。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會被文本遮蓋。最后一行代碼在每個導(dǎo)航項目的底部生成一條白線，兼具美化和分界的功能。
接下來是鏈接外觀的定義：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代碼是對導(dǎo)航內(nèi)a標簽的CSS定義，作用于導(dǎo)航中的每個鏈接元素。display: block將鏈接對象轉(zhuǎn)換為塊級元素，然后再定義其寬和高，使得鏈接能具有類似按鈕一樣矩形的觸發(fā)區(qū)域，并且讓我們可以利用偽類a:hover來定義鼠標經(jīng)過鏈接時的翻轉(zhuǎn)效果，如在第二段代碼中展示的簡單的改變背景色或背景圖片：

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}
#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
第一段代碼定義了鏈接文本的顏色，并設(shè)置text-decoration屬性為none來去除鏈接默認的下劃線。導(dǎo)航的設(shè)計往往要求簡潔、明了，并且具有很強的指示性，所以我在這里定義了一個額外的樣式#current來表現(xiàn)當前頁面處于導(dǎo)航中的哪個項目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名為current的樣式針對的是列表項目li中的鏈接元素，其屬性的定義與鏈接的hover狀態(tài)樣式是一樣的，現(xiàn)在我們要做的事情就是把這個樣式應(yīng)用到HTML中：
<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>
現(xiàn)在的current樣式是應(yīng)用在第一個li上，也就是瀏覽器解析后“Home”菜單較之其它的菜單項目有其獨特的外觀，表明當前的頁面是屬于“Home”這里欄目的。當然頁面變化了，current樣式應(yīng)用的li對象也就不一樣了。

最新評論