CSS網(wǎng)頁制作布局實(shí)例教程

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:36 作者：佚名

相關(guān)文章：用CSS建設(shè)網(wǎng)站的實(shí)例原文博客：veerle 翻譯整理：西米CC 來自國外博客veerle的一個(gè)系列教程，分八個(gè)部分講解一張完整CSS頁面的構(gòu)建過程。雖然它不是每個(gè)步驟都解釋得非常詳細(xì)，但是其中提及的很多技巧和經(jīng)驗(yàn)都很值得初學(xué)者借鑒，從界面設(shè)計(jì)到頁面構(gòu)建，

CSS混沌初開V：側(cè)邊欄導(dǎo)航菜單的實(shí)現(xiàn)
首先對(duì)教程的第四部分作一點(diǎn)補(bǔ)充。有人建議Blog的標(biāo)題最好使用H1標(biāo)簽，以文本的形式表現(xiàn)標(biāo)題內(nèi)容，原因是不論是在CSS關(guān)閉的情況下，還是對(duì)于搜索引擎的抓取，H1標(biāo)簽結(jié)合文本的形式都具有更好的可訪問性。這個(gè)提議很有道理，很多人也是這么做的，所以我也建議大家對(duì)之前的代碼進(jìn)行調(diào)整。
若使用H1標(biāo)簽來實(shí)現(xiàn)Blog標(biāo)題，又想保持原來標(biāo)題位置的圖片的話，那么就有必要了解一下CSS中很經(jīng)典的圖像替換文本技術(shù)。簡單點(diǎn)說就是在XHTML中包含了文本，并為其設(shè)置背景圖片，但是要通過CSS“隱藏”文本而僅僅顯示背景圖片。若你對(duì)這個(gè)技術(shù)不是很了解，本站也有一篇專門關(guān)于圖像替換文本技術(shù) 的文章，希望對(duì)你有所幫助。
圖像替換文本技術(shù)
這個(gè)技術(shù)有時(shí)候我們也稱之為文本替換或圖像替換，其強(qiáng)調(diào)的核心是在HTML代碼中我們使用文本，然后通過一些方法將文本“隱藏”，而僅顯示背景或其它形式的圖片，這樣在保證可訪問性的同時(shí)，也使得頁面因圖像的應(yīng)用而更加美觀。比如我們可以將圖片設(shè)置為背景，讓后利用text-indent使文本有足夠的縮進(jìn)實(shí)現(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標(biāo)簽中，這樣頁面中所有的內(nèi)容都被定義為居中顯示，而那些不需要居中的內(nèi)容，如文章正文，我們可以再添加text-align: left進(jìn)行覆蓋。當(dāng)然對(duì)于外圍容器而言，我們利用margin: 0px auto使其在水平方向上保持在頁面的中部。
導(dǎo)航菜單的實(shí)現(xiàn)
首先定義導(dǎo)航外圍容器的樣式：
#left {
width: 178px;
}
現(xiàn)在外圍容器我們只要簡單的定義其寬度，并賦予left的id名。在left容器中，我們添加一個(gè)名為navcontainer的子容器來放置導(dǎo)航菜單。實(shí)現(xiàn)導(dǎo)航的標(biā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標(biāo)簽構(gòu)建了一個(gè)簡單的項(xiàng)目列表，其項(xiàng)目符號(hào)默認(rèn)為小圓點(diǎn)，這是我們不需要的。利用CSS可以去掉那些小圓點(diǎn)，并用背景圖片的形式替換以我們制作好的圖標(biāo)：

#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)航項(xiàng)目的周圍沒有空隙，并去除了列表項(xiàng)默認(rèn)的縮進(jìn)，list-style-type則定義了列表的項(xiàng)目符號(hào)為無。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會(huì)被文本遮蓋。最后一行代碼在每個(gè)導(dǎo)航項(xiàng)目的底部生成一條白線，兼具美化和分界的功能。
接下來是鏈接外觀的定義：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代碼是對(duì)導(dǎo)航內(nèi)a標(biāo)簽的CSS定義，作用于導(dǎo)航中的每個(gè)鏈接元素。display: block將鏈接對(duì)象轉(zhuǎn)換為塊級(jí)元素，然后再定義其寬和高，使得鏈接能具有類似按鈕一樣矩形的觸發(fā)區(qū)域，并且讓我們可以利用偽類a:hover來定義鼠標(biāo)經(jīng)過鏈接時(shí)的翻轉(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來去除鏈接默認(rèn)的下劃線。導(dǎo)航的設(shè)計(jì)往往要求簡潔、明了，并且具有很強(qiáng)的指示性，所以我在這里定義了一個(gè)額外的樣式#current來表現(xiàn)當(dāng)前頁面處于導(dǎo)航中的哪個(gè)項(xiàng)目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名為current的樣式針對(duì)的是列表項(xiàng)目li中的鏈接元素，其屬性的定義與鏈接的hover狀態(tài)樣式是一樣的，現(xiàn)在我們要做的事情就是把這個(gè)樣式應(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)用在第一個(gè)li上，也就是瀏覽器解析后“Home”菜單較之其它的菜單項(xiàng)目有其獨(dú)特的外觀，表明當(dāng)前的頁面是屬于“Home”這里欄目的。當(dāng)然頁面變化了，current樣式應(yīng)用的li對(duì)象也就不一樣了。