CSS网页制作布局实例教程
本教程最終效果如下（瀏覽示例頁面）：
本教程素材及頁面源代碼下載
教程的每個部分都有其側重點，其中前三節都是關于素材制作與設計的，要求有一定的Photoshop操作基礎，我想這也是網頁設計必備的基礎技能之一。
?
CSS混沌初開I：導航菜單素材的設計
現在開始我們將學習如何一步一步的構建一張CSS頁面。本教程分成以下幾個部分：第一講主要是關于如何在PS中制作導航按鈕素材；第二部分主要針對的內容是背景，接著是頁面的整體布局以及頂部解析，最后一部分是如何整合CSS和XHTML。
有些人可能會疑惑為什么要從導航按鈕圖片的制作開始，事實上我的初衷是讓大家了解進而注重素材制作中的一些細節處理，這對最終的作品效果有很大的影響，至少在視覺上而言。首先看一下完成的效果：
玻璃質感導航圖片的制作：
首先我們在Photoshop中建立一個178x22像素的RGB空白文檔，添加一個新圖層命名為“按鈕”，并用灰色#ECECEC進行填充。再新建一個圖層命名為“高光”，在其上、左邊緣各繪制1px的白色線條，你用畫筆或單像素選取工具都可以。然后我們用橡皮工具把左邊緣白線的底部擦除一段，在這里我使用的是大小20px透明度為50%的橡皮刷：
新建一個名為“網點”的圖層，用1px的鉛筆工具在適當的位置繪制幾個小點，示例中的顏色是#727272，當然這里你可以自由發揮設計更有創意的小點組合，關鍵就是要讓它們看起來精致有序：
接著我們可以通過鋼筆工具繪制路徑創建選區，并在選區內填充#d6d6d6顏色，來模擬玻璃的質感效果。整個圖片素材的制作過程雖然不是很復雜，但是最終效果看起來也不是很差，不是么？
鼠標經過導航時的翻轉圖片：
創建翻轉效果圖片，我們只要簡單的在原有素材基礎上調整色調就即可，關于文本的添加在這里就不細說了。我們可以為每個圖層調整色調，在示例中我主要使用了一下幾種顏色：背景#BFE3FF、玻璃質感#A5D1F3、網點#E4001B。這部分教程涉及到一些Photoshop的基本知識，如果你不是很了解，建議先學習一些PS的入門基礎，畢竟Adobe合并了Macromedia之后，其旗下軟件尤其是PS與網頁設計的關聯性已經越來越緊密了，大多時候你要設計出優秀美觀的網頁，都離不開這些軟件的幫助。當然顏色選擇要視乎你的需要，制作的方法大致還是相通的，你也可以發揮創意進行更好的細節設計：
下載本例素材源文件
?
CSS混沌初開II:背景圖案及配色
本教程的第二部分主要有兩個重點：一是如何正確選擇導航菜單中所涉及的顏色，雖然它沒有很多的技術含量，但使用的顏色是否恰當，與后期出來的效果是有很大影響的；另外一部分主要是關于頁面背景的，側重于制作背景圖片素材時的一些細節問題。
在第一講中，我主要是介紹一種實現玻璃材質按鈕的快捷途徑，現在來講顏色的選擇似乎有點滯后了。不過鑒于網站的風格存在差異，素材色系的選擇也是界面設計階段很重要的一塊內容，網絡上也有很多關于網頁色彩的文章，大家可以依據其中介紹的一些基本知識進行參考，雖然良好的色彩感覺需要很長一段時間來培養。
選擇你的色彩體系
事實上色系的選擇會體現很多個人因素，畢竟每個人都會有各自的色彩偏好，你的選擇也會彰顯你的個人風格。沒人能建議你“必須選擇什么顏色”，這里我也只能提供一些個人認為比較實用的意見：
在顏色的搭配上，不論是主色還是輔助色，都要善于通過它們明度變化來衍生更多的色彩，如果只是反復的使用三種以下的顏色未免會讓人感覺單調，當然這也不是意味著顏色變化越多你的頁面看起來就會越出色，仍然要視乎網站的整體風格和設計者對顏色的駕馭能力：
在PS中我們可以通過在色相/飽和度（Ctrl+U）面板中調整參數來調配顏色。事實上圖中的幾組顏色就是通過這種方法調制出來的，當然在這個面板中可以變化出很多顏色，具體哪個參數應該為什么值都沒有硬性的規定，網絡上有很多推薦的色彩組合并明確給出了RGB值，大家在利用這種方法配色的時候也可以參考那些文章教程。
如果你看了上面的講解之后仍然不知道如何著手，這段關于顏色的影片 或許會對你有所幫助。事實上我覺得每個人都應該去看一下這個影片，不僅因為它本身設計得相當有趣，更重要的是對于認識和了解大眾化的色彩體驗和感知從而運用到網頁設計中，它都是一個很好的引導和鞏固。
是時候開始繪制背景圖案了
現在我們開始討論網頁的背景圖案。當我們在PS等軟件中創作背景圖案時，往往要精細到像素，尤其是那些平鋪填充的背景。首先我們在PS中新建一個30x像素的空白文檔，填充適當的顏色，并用鉛筆工具在其上繪制一些單像素小點，下面是一些例子：
如第一講中導航按鈕上的小點一樣，在這里你也可以盡量的發揮自己的創意，但是還是有幾個需要注意的地方，比如小點的顏色，不能跟背景色反差太大，不然平鋪以后它們會變得很刺眼。如果要利用小點來組合出一些圖案或線條，我通常會采用復制圖層并通過方向鍵調整其位置的方法，適當的時候還會變化其圖層模式或透明度等。
制作這些背景圖案的一個難點就是，如何保證圖案平鋪時能實現無縫接合，畢竟背景的面積往往比較大，它上面若有割裂就會很顯眼。我通常采用的方法是利用PS中的矩形選框工具，比如下圖中，正方形選區左上角標識出的像素必須與其它三個標識區一致，那么當我們把這樣一塊區域截取下來進行平鋪的時候就不會有問題：
當然這個問題是否容易解決，也是視乎你最初設計的背景圖案，如果我們動手的時候就把可能遇到的一些問題考慮在內，那么到解決的時候也不會太費力甚至返工了。
下載本例素材源文件
?
?
CSS混沌初開III:頂部圖片視覺修飾
這節是關于素材設計的最后一部分了，設計工作完成后將會開始講解如何切片以及在CSS和XHTML中構建最終頁面。首先看一下這節設計的效果圖：
在制作按鈕時，我用了粉紅和暗綠兩種色調，可能看起來有點怪，但個人很鐘意這個組合。在設計網頁整體界面的過程中，我會給出一些意見和建議，重點是頂部的圖片，如何增加一些細節，讓它看起來更加的美觀、精致。
頂部圖片的視覺處理
在教程的前兩部分中，提到過導航按鈕的顏色選擇，現在我們來看一下如何處理一張花卉圖像的色調，使其與頁面的風格達到統一。在用到的花卉圖像素材中，大家可以發現它上面也有紅和綠兩種色調，我要做的事情就是把其中的顏色調制成粉紅和暗綠，就好似導航菜單中使用的色調一樣：
首先來看一下圖片中花朵的顏色，它的色調偏向于大紅，還是使用PS中的色相/飽和度命令來對它進行調整。利用快捷鍵按Ctrl+U調出色相/飽和度面板，在“編輯”項的下拉列表中選擇“紅色（Ctrl+1）”，這樣我們就能只針對圖像中的紅色進行調整了。拖動色相滑塊調制出我們需要的紅色，具體的數值依據實際情況，比如我這里是大致是-30左右：
下一步就是通過修飾細節增加一些輔助色調來增進視覺效果，為接下來的濾鏡處理作一些預處理。頂部圖片的處理對創意有一定的要求，如果有相關的經驗的話也就不是件難事，所以素材處理能力以及個人的美工基礎都會對設計過程、設計結果產生影響：
在之前的步驟中圖片的尺寸和體積無疑已經進行了調整，但是如果有比較多的細節要處理的話，建議還是在原始尺寸上操作，像示例中的圖片我剛開始也是在1600 1200的原始大小下進行處理的。我為圖像添加了個人比較偏愛的繪畫涂抹濾鏡（濾鏡菜單—藝術效果），效果如下圖。在PS中，濾鏡的運用是很有趣的一件事情，調節其中的參數就可以達到很多意想不到的效果，加之在CS版本中提供了可用濾鏡效果的縮略圖預覽，讓這個實用的工具用起來更加方便：
接著我們添加一些波浪線條來營造虛幻的意境，可以用筆刷或者鋼筆繪制一些曲線，當然也可以用漸變工具制作，只要達到下圖中漸隱效果即可。事實上我們只需要做出其中一條就可以了，然后復制圖層調整其透明度、角度、扭曲制作出其它的線條。這里使用的顏色還是推薦使用粉紅，為了區別于花朵的顏色，可以把線條的粉紅明度調大一點。在圖片的右邊，我利用Tamuz字體添加了一個修飾符號，效果如下：
如果對以上操作有疑問，可以 下載QuickTime演示影片 觀看！
在圖片上添加BLOG標題
Blog的標題反映了你網站的內容主題，其文字組織因人而異，一般還會加上一個圖標或LOGO，畢竟每個人都想自己的Blog與眾不同，有一些標志性的元素，在這里我就簡單的選用一個仙人掌標志：
下面是一些關于字體或修飾符號的資源鏈接：
-
- Adobe提供的修飾性字體
- 一系列免費的Dingbats字體
最終的界面設計效果
至今為止，不論是在導航按鈕還是頂部圖片的制作，我們都還沒有遇到什么棘手的難題。現在讓我們把做出來的素材整合在一起，拼合成一張 最終的界面效果 。這已經是界面設計的最后一個階段了，所有若還有什么可添加的修飾元素，最好都在界面效果圖中體現出來。在我的示例頁面中，文章標題和友情鏈接的前面我都用精致的圖標進行修飾，效果看起來還可以，當然你們可以選擇自己喜歡的素材替換，最好也能在設計過程中體會到樂趣！
?
CSS混沌初開V：側邊欄導航菜單的實現
首先對教程的第四部分作一點補充。有人建議Blog的標題最好使用H1標簽，以文本的形式表現標題內容，原因是不論是在CSS關閉的情況下，還是對于搜索引擎的抓取，H1標簽結合文本的形式都具有更好的可訪問性。這個提議很有道理，很多人也是這么做的，所以我也建議大家對之前的代碼進行調整。
若使用H1標簽來實現Blog標題，又想保持原來標題位置的圖片的話，那么就有必要了解一下CSS中很經典的圖像替換文本技術。簡單點說就是在XHTML中包含了文本，并為其設置背景圖片，但是要通過CSS“隱藏”文本而僅僅顯示背景圖片。若你對這個技術不是很了解，本站也有一篇專門關于 圖像替換文本技術 的文章，希望對你有所幫助。
圖像替換文本技術
這個技術有時候我們也稱之為文本替換或圖像替換，其強調的核心是在HTML代碼中我們使用文本，然后通過一些方法將文本“隱藏”，而僅顯示背景或其它形式的圖片，這樣在保證可訪問性的同時，也使得頁面因圖像的應用而更加美觀。比如我們可以將圖片設置為背景，讓后利用text-indent使文本有足夠的縮進實現隱藏，代碼如下：
h1 {
??? width: 692px;
??? height: 90px;
??? text-indent: -9999px;
??? background: url(images/header.jpg);
??? margin: 0;
??? padding: 0;
}
其中的width和height是必須定義的，且需和背景圖片的尺寸保持一致。text-align: center被轉移到了body標簽中，這樣頁面中所有的內容都被定義為居中顯示，而那些不需要居中的內容，如文章正文，我們可以再添加text-align: left進行覆蓋。當然對于外圍容器而言，我們利用margin: 0px auto使其在水平方向上保持在頁面的中部。
導航菜單的實現
首先定義導航外圍容器的樣式：
#left {
??? width: 178px;
}
現在外圍容器我們只要簡單的定義其寬度，并賦予left的id名。在left容器中，我們添加一個名為navcontainer的子容器來放置導航菜單。實現導航的標簽推薦使用無序列表ul，通過CSS我們可以改變其外觀和形式。HTML結構如下：
<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標簽構建了一個簡單的項目列表，其項目符號默認為小圓點，這是我們不需要的。利用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;
}
第一段代碼還是定義導航容器的寬度，其值與left容器相同。第二段代碼主要用于改變列表的外觀，margin和padding確保導航項目的周圍沒有空隙，并去除了列表項默認的縮進，list-style-type則定義了列表的項目符號為無。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會被文本遮蓋。最后一行代碼在每個導航項目的底部生成一條白線，兼具美化和分界的功能。
接下來是鏈接外觀的定義：
#navcontainer a {
??? display: block;
??? width: 178px;
??? height: 22px;
}
以上代碼是對導航內a標簽的CSS定義，作用于導航中的每個鏈接元素。display: block將鏈接對象轉換為塊級元素，然后再定義其寬和高，使得鏈接能具有類似按鈕一樣矩形的觸發區域，并且讓我們可以利用偽類a:hover來定義鼠標經過鏈接時的翻轉效果，如在第二段代碼中展示的簡單的改變背景色或背景圖片：
#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;
}
第一段代碼定義了鏈接文本的顏色，并設置text-decoration屬性為none來去除鏈接默認的下劃線。導航的設計往往要求簡潔、明了，并且具有很強的指示性，所以我在這里定義了一個額外的樣式#current來表現當前頁面處于導航中的哪個項目：
#navcontainer li a#current {
??? background: url(images/bg_navbutton_over.gif);
??? color: #A5003B;
??? text-decoration: none;
}
名為current的樣式針對的是列表項目li中的鏈接元素，其屬性的定義與鏈接的hover狀態樣式是一樣的，現在我們要做的事情就是把這個樣式應用到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>
現在的current樣式是應用在第一個li上，也就是瀏覽器解析后“Home”菜單較之其它的菜單項目有其獨特的外觀，表明當前的頁面是屬于“Home”這里欄目的。當然頁面變化了，current樣式應用的li對象也就不一樣了。
?
?
CSS混沌初開IV：頁面DIV布局解構
在前三講的教程中我們已經完成了網頁界面設計的工作，從本節開始，我們將關注如何對效果圖進行解構，并初步擬定網頁文件的DIV結構。
首先我們必須明確幾個問題，比如設計好的界面應該劃分成幾塊？每塊對應網頁中的哪部分內容？只有對這些問題有了概念之后，我們才能開始進行切片和導出的操作。如果對頁面構建的整個流程很熟悉，那么以上幾個問題并沒有太大的難度，可能你在PS中設計素材的時候就已經開始考慮之后的DIV劃分了。當然，我們是要有一定的應變能力，合理的組織CSS和XHTML，讓最終出爐的網頁具有更好的靈活性和可訪問性。
本例中頁面模塊劃分的規劃
必須進行切片并導出JPF或GIF的幾塊區域
也許你會想：“那背景圖片呢?”我沒有把它羅列在其中，因為背景圖片比較特殊，不論在何種分辨率下我們都要保持主體內容的居中，所以我們需要一種更聰明的方法。這是我們要導出的背景圖片，它的尺寸是1600X5px，應該夠用了，除非你擁有Apple公司30英寸的超寬屏顯示器。
利用CSS定義頁面的背景
下面的CSS代碼可以讓我們的頁面背景保持居中顯示：
body {
??? background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
??? background-attachment: fixed;
}
背景圖片只有5px高度，所以我們將其設置為縱向平鋪，然后利用參數50%使其水平居中，參數fixed的用處是讓背景不隨內容的滾動而滾動，它是“凝固”的。這里的選擇符我們使用body，因為背景效果是針對整張頁面而言的。
構建頁面的DIV結構
首先來看一下頂部版塊的CSS定義：
#header {
??? text-align: center;
}
頂部版塊的樣式我們使用id選擇符，注意在同一個文檔中id選擇符必須是唯一的。網頁的頂部也需要居中，這也是我們為什么定義text-align的原因。下面這段代碼我們要添加在body標簽之間：
<div id="header">
??? <img src="images/header.jpg" alt="ximicc" width="692" height="90" />
</div>
你可能也注意到了，當頂部圖片應用到網頁中的時候，其上邊緣和瀏覽器邊界之間有一定的間隙，所以在這里我們要用margin和padding進行完善：
body {
??? background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
??? background-attachment: fixed;
??? margin: 0;
??? padding: 0;
}
如果你對以上涉及的CSS還不是很熟悉的話，這個 入門教程（英文的，節哀...）建議你去看一下，相信會有很大的幫助。
?
CSS混沌初開VI：正文與圖片的混排
現在我們可以開始在網頁中添加內容了，在后續教程中將會介紹友情鏈接版塊以及頁腳的制作。
首先在CSS中添加一個id選擇符，在其中定義一個寬度值514px (692-178)：
#content {
??? width: 514px;
??? float: left;
}
因為導航菜單浮動在頁面主體的左邊，所以我們要在#left中添加一條float: left語句，#content中的左浮動是針對其外圍容器的，解析之后它將顯示在導航右邊的正文版塊：
#left {
??? width: 178px;
??? float: left;
}
接下來在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對上面的CSS和XHTML組織感到疑惑，下面的教程可能會對你有所幫助：
- CSS中的Float屬性入門
- 浮動屬性Float的應用
你會發現正文的內容跟導航菜單貼得很緊，我們可以利用padding來增加一點間隙：
#content {
??? width: 479px;
??? float: left;
??? padding-top: 15px;
??? padding-right: 0;
??? padding-bottom: 10px;
??? padding-left: 20px;
}
也可以將代碼簡化成：
[/code]#content {
??? width: 479px;
??? float: left;
??? padding: 15px 0 10px 20px;
}
[/code]
不論是padding還是margin，若其后跟著四個數值，對應的邊緣順序是上右下左，即順時針方向。大家會發現現在#container中定義的寬度由原來的514變成了479，因為我們為了讓正文文本與左右邊框空出一點距離，左邊緣用padding實現，而右邊緣因為整個DIV是左浮動的，所以我們直接將DIV的寬度縮減15px，所以width的值就變成了514-20-15=479px。
你可能會疑問：“為什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”剛開始的時候我也是這么做的，出來的效果在Safari, FireFox 和Mozilla還算正常，但在IE中就不行了，正文版塊跳到了導航的下面，好像右邊沒有足夠的空間容納下正文DIV，具體問題出在哪里我也說不清楚，可能也是IE的一個Bug吧。
添加正文的文章標題
先來看一下主內容版塊的結構：
我們把文章的標題放在H2標簽中：
<h2>This is the title</h2>
針對文章標題的CSS定義如下：
#content h2 {
??? font: normal 18px Georgia, Times New Roman, Times, serif;
??? color: #80866A;
??? background: transparent url(images/bullet_title.gif) no-repeat;
??? width: 454px;
??? padding: 0 0 0 30px;
??? margin: 0;
}
這里我們使用#content h2的選擇符組合，當然也可以直接對H2標簽進行定義，但是會對頁面中所有的H2元素都起作用。這個CSS樣式的定義中，除了常規的字體集、顏色、字號之外，還利用padding屬性在標題文本左邊空出30px的縮進，目的是不要遮蓋背景圖片。背景background屬性中，除了圖片的路徑及其平鋪方式，還定義了其背景色為透明transparent，使整個標題更好的與其它元素融合
添加正文文本
下面一個class類.text定義了正文文字的樣式：
.text {
??? font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
??? color: #5B604C;
??? margin-bottom: 10px;
}
與id不同的是，class類可以在一張頁面中重復使用，里面的屬性比較簡單，需要補充一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個段落標簽P來放置文本，并應用.text樣式：
<p class="text">Here comes the text</p>
在正文中添加混排圖像
下面是應用在圖像上的樣式：
.imageright {
??? float: right;
??? padding: 7px;
??? background-color: #ffffff;
??? border: 1px solid #bac1a3;
}
這里我們還是使用class類，因為以后可能還會用到它。float:right讓圖片在文本塊中居右，而白色的背景和四邊均為7px的padding，使得圖片的四周有了類似7像素白邊的效果，目的是讓圖片內容與邊框保持7px的間距。而真正的邊框由border定義，1像素實線。如果在文本塊中有居左的圖片，我們可以再添加一個名為.imageleft的class類，具體的屬性設置只要把float: right改成float: left就可以了。
?
CSS混沌初開VII：頁腳的構建
在開始第七部分的教程之前，我要先糾正一個小錯誤。之前在添加正文內容時，我把它放在了一個DIV容器中，事實上如果我們用段落標簽P作容器可以達到相同的效果，而且當CSS關閉時也能正常顯示。用P標簽來實現的話，還可以用margin來控制段落的上、下邊距，也就不需要什么換行標簽了。
首先要提醒大家的是，相對于表格布局方式，CSS中頁腳的實現有著很大的區別。遺憾的是Safari作為一個新生瀏覽器，其對Web標準的支持還不是很完善，比如min-width和min-height屬性在Safari中還沒能得到良好的支持，但是頁腳的實現我們往往需要用到它們。在繼續本節教程之前，希望大家去了解一下這篇Bobby Van Der Sluis文章，它對CSS中的垂直定位和頁腳實現作了很到位的講解。
首先還是要先明確一下文檔的DIV結構，之前制作的內容比如頂部、導航、正文等我們都封裝到一個id名為container的DIV中，這組容器標簽緊跟在body標簽之后，接著就是一個id名為footer的頁腳容器，代碼如下：
<html>
...
<body>
??? <div id="container"> ... </div>
??? <div id="footer"> ... </div>
</body>
</html>
頁腳DIV的CSS設置如下：
#footer {
??? margin: 0px auto;
??? position: relative;
??? background-color: #717F51;
??? border-top: 9px solid #F7F7F6;
??? width: 692px;
??? padding: 5px 0;
??? clear: both;
}
我們為頁腳設置暗綠色的背景以及9px的上邊框，寬度定義為692px。Clear屬性用于清除浮動，簡單點說就是在其左邊或右邊不允許有任何浮動元素。margin: 0px auto的語法在之前的教程中已經出現過了，其作用就是讓頁腳在頁面中居中顯示。為了不讓頁腳文字和邊框貼得太近，我們用padding在上、下空出5px的填充空間。
接下來為頁腳中的文字和鏈接定義樣式：
#footer h2 {
??? maring: 0;
??? text-align: center;
??? font: normal 10px Verdana, Arial, Helvetica, sans-serif;
??? color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
??? color: #D3D8C4;
??? text-decoration: none;
??? border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
??? color: #F7F7F6;
??? text-decoration: none;
??? border-bottom: none;
??? background-color: #A5003B;
}
頁腳中的文字我們放置到H2標簽中：
<div id="footer"><h2>....</h2></div>
上面這行代碼我們添加在名為container的DIV閉合標簽后面，也即是在body的閉合標簽之前。接下來我們要添加一段Bobby Van Der Sluis建議采用的JS腳本，讓頁腳在Safari瀏覽器中也能固定在瀏覽器底部。
確保你使用的ID名跟在JS中定義的函數名保持一致。
完成JS的添加后，如果你在瀏覽器中預覽，你會發現頁腳并沒有顯示出來。這可能是因為有兩個浮動容器(#left and #content)都需要進行浮動清除，在的文章中有很詳細的介紹。我們需要添加下面的代碼進行修正，首先添加一個用于清除浮動的DIV：
<div class="clear"> </div>
然后為其定義CSS：
.clear {
??? clear: both;
}
?
CSS混沌初開VIII：側邊欄友情鏈接
這是本教程的最后一部分，講解如何實現友情鏈接版塊。需要說明的是，這部分我們將把樣式表轉換為外聯式來實現CSS樣式的設定。
首先是XHTML代碼：
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
??? <li><a href="http://stopdesign.com/">Stopdesign</a></li>
??? <li><a href="http://www.simplebits.com/">SimpleBits</a></li>
??? <li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
??? <li><a href="http://www.ximicc.com/">Ximicc</a></li>
</ul>
</div>
我們把所有的鏈接放置在一個名為fav的DIV容器中，并將在CSS中定義其width、margin和padding等屬性。欄目標題利用H2標簽實現，而鏈接鏈表則還是用無序列表ul來實現。
接下來定義favlinks容器的樣式：
#favlinks {
??? width: 163px;
??? padding-left: 15px;
??? margin-top: 10px;
}
其中定義的三個屬性都比較簡單，你可能會注意到width值與導航菜單的寬度178不相等，原因仍然是padding-left中定義了15px的內填充，所以其寬度值應該是178-15=163px。如果你對此不是很理解，建議你去參考一些介紹CSS中盒模型原理的文章。
下面是欄目標題文字的CSS定義：
#favlinks h2 {
??? font: normal 16px Georgia, Times New Roman, Times, serif;
??? color: #5C604D;
??? margin: 0 0 10px 0;
??? padding: 0;
}
除了設置文字的字體和顏色之外，padding和margin的定義也是必須的，因為如果不明確指定的話，欄目標題和鏈接列表之間的間隔可能會不可預期，在這里我直接用margin屬性定義了10px的下邊距。
無序列表ul的CSS定義：
#favlinks ul {
??? margin: 0;
??? padding: 0;
??? list-style-type: none;
}
這里的屬性設置與第五部分教程中實現導航的ul設置一樣，主要是隱藏了默認的小圓點項目符號，并把邊距和填充設置為0。
為列表中各個鏈接添加圖標：
ul.extlinks li {
??? background: url(images/bullet_extlink.gif) no-repeat 0 3px;
??? font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
??? padding-left: 12px;
}
在XHTML中我們把名為extlinks的class類應用在了ul標簽上，所以這里用ul.extlinks li的選擇符組合來定義. Extlinks下級中的li元素樣式。圖標還是采用背景的方式實現，屬性中為其定義了坐標，即Y軸方向下移3px，目的是為了讓圖標與其后的鏈接文字實現更好的對齊。Padding中只定義了一個左填充，防止鏈接文字與圖標產生重疊。
鏈接樣式的定義：
.extlinks a:link {
??? color: #A5003B;
??? text-decoration: none;
??? border-bottom: 1px dotted #A5003B;
}
.extlinks a:visited {
??? color: #6F2D47;
??? text-decoration: none;
??? border-bottom: 1px dotted #959E79;
}
.extlinks a:hover {
??? background-color: #C3C9B1;
??? color: #A5003B;
??? text-decoration: none;
??? border-bottom: 1px solid #A5003B;
}
在鼠標經過的狀態中，除了背景色外，我們還用邊框屬性定義了一條1px的實線下邊框，相應的也就需要設置doc屬性來消除默認的鏈接下劃線。關于字體的定義不是必須的，因為在li標簽的CSS中已經體現過了。對訪問之后的鏈接，我們將文字及下邊框的顏色作了細微的淡化，使其不會那么顯眼，并提示訪問者這個鏈接你已經點擊過了。定義鏈接樣式的時候，注意四個鏈接轉臺的順序，正確的應該是LVHA，否則鼠標經過等效果可能會不能正常顯示，這里有一種很好很有趣的方法希望能幫你牢記這個順序：LOVE/HATE。
創建外部樣式表
現在所有的界面設計和頁面構建工作已經完成了，還剩下最后一項工作。在本教程的學習中，你可能會發現我經常使用內聯樣式，事實上在很多人的概念中外部樣式表才是王道，我們應該把CSS樣式定義在一個單獨的樣式表文件中，然后與網頁文檔連接起來。現在我們可以把之前的樣式定義剪切出來，粘貼到一個新文檔中，命名為ximicc.css 。
連接外部樣式表
<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />
因為這里的樣式我們只要顯示在電腦屏幕上，所以連接代碼里的media參數設置為screen，若需要打印頁面，則把該參數設置為print會有更好的打印效果。關于該參數更多的設置，可以 參考這里 。
?
總結
以上是生活随笔為你收集整理的CSS网页制作布局实例教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解决“无法找到运行搜索助理需要的一个文件
- 下一篇： IIS错误解决方法