中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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對象也就不一樣了。

出處：藍色理想
責任編輯：bluehearts

上一頁 頂部圖片視覺修飾 下一頁 頁面DIV布局解構(gòu)

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。