設計一個基于CSS的網(wǎng)頁模板

2020-03-24 16:45:16

字體：大中小

供稿：網(wǎng)友

這是一個教你如何一步一步學習建立基于CSS制作網(wǎng)站的開始，這個教程將由幾個部分組成。第一部分是講述如何在photoshop中制作導航按扭的；第二部分將講述背景的制作，再下一個是講述標題(header)和頁面的設計規(guī)劃的，在最后是CSS和XHTML的應用的執(zhí)行。
現(xiàn)在也許有些人想知道為什么在我的教程里要以導航按扭的制作來開始，呵呵，其實我最初的目的是要講述一段關(guān)于這些簡單按扭的制作方法的小教程的，但是即然這個想法開始了，為什么不做一個全面的講解呢！
建立一個像玻璃面一樣的導航按扭
在photoshop里新建一個RGB模式的文件，大小為178x122像素，背景色為白色，然后新建一個圖層（起名為“button”），然后填充這個圖層用灰色（#ececec），再建一個新的圖層（起名為“highlight”），并畫一個一個像素的白的加亮的線分別在左邊上上邊（用鉛筆工具，1個像素的筆頭）。用“減淡工具”（大小為20像素的筆刷，透明度為50%）將左側(cè)的白線條減淡一些形成上下漸變的效果。
新建一個圖層（起名為“bullet”），畫一堆像素小點用鉛筆工具（1px,#727272）,當然你也可以按照自己的意愿來選擇顏色和大小。
用鋼筆工具畫一個類似于玻璃斜面效果的曲線路徑（顏色為#d6d6d6）。
好了，你已經(jīng)做好了自己的按扭，沒有什么難度吧？
建立鼠標經(jīng)過時效果
建立鼠標經(jīng)過時要顯示的圖像效果最簡便的方法便是復制我們的圖層，然后改變它的顏色。現(xiàn)在，你需要到每一個圖層去它們的顏色來建立這個鼠標經(jīng)過時的圖像的效果，這是我在這個例子里用到的顏色設置：
按扭的背景層：#bfe3ff
曲線斜面層：#a5d1f3
小像素點層：#e4001b
下載這個教程中用到的photoShop源文件！了解這個系列教程的這些基本的知識是必需的！今天我將帶大家一起開始關(guān)于我們的基于CSS的網(wǎng)頁制作的第二部分，這一部分是講述關(guān)于改變一個適當?shù)念伾渲玫暮蜑槲覀兊木W(wǎng)頁制作一個漂亮的背景圖案的，在第一部分我們落下了這個，所以在這兒補上。
就像大家所知道的，我的最初的意圖是給你們講述一個小的如何用簡單的方法制作漂亮的立體按扭的教程，，所以這個教程的第一部分可能對你來說有點兒單一，以下我們將講述關(guān)于色彩方案的設計在這個教程的第二部分，這實際上來講是我們的第一步，按扭的創(chuàng)建，背景的制作等。
選擇你的色彩方案
無論如何，你都可能有一個領(lǐng)先，選擇恰當?shù)念伾渲檬侵陵P(guān)重要，它反映了你是誰，你喜歡什么等！
實際上，解釋給你，你選擇什么或許不是至關(guān)重要的，盡管我總是努力遵循以下幾個小的提示：
1、使用至少一種能對比突現(xiàn)出來的顏色來用于強調(diào)在你的頁面上，用它來做文本鏈接的顏色將是很顯眼的，可見性就比較好。
2、務必不要用太多的不同的顏色，否則你將以一個沒有重點的混亂設計而告終。我最多只用3種顏色，兩種相差不多的和一種高亮的。
3、從這兩種相差不多的當中，來通過明暗的變化而調(diào)節(jié)，如果你只用了不到3種顏色，那可能會看上去有一些單調(diào)的，盡管你也用了足夠多的明暗變化。以下幾種配色方案可能對你實際工作有所幫助：
在photoshop中使用色彩飽和度的調(diào)節(jié)來觀看你所選擇的顏色的變化，你會發(fā)現(xiàn)，實際上上面的這些例子的顏色都是通過這個方法得到的

以下我們再講一下畫像素圖案
現(xiàn)在是教大家畫像素圖案的時間！在photoShop中新建一個文件，大小為30x30像素，色彩模式為RGB，背景色可以是你想要的任意顏色，用鉛筆工具畫一些像素點，這是一些你可以開始時照著做的例子：
花大量的時間來制作這些像素圖案，實際上是一種通過不同的方法的嘗試，任何我們所不知道的技巧只有通過親自嘗試自己的想法才會成為技巧。我所做的大多數(shù)網(wǎng)頁都是先開始于背景圖案的制作，選擇一個接近于背景色的顏色，然后來畫些像素點。如果我建立的背景圖案是一些線，我可以在photoshop中把那個包含一條線的圖層復制一份新的出來，然后向左或右或上下移動一點兒。或者再改變一下透明度和層選項等。
這些放大的圖案是真實的像素點的分布，被裁切開的右邊正好又和左邊相連從而鋪開就構(gòu)成了一個完整的循環(huán)。

下一步我們將要講述實際的頁面框架的設計和規(guī)劃，核心內(nèi)容將是講如何制作一個引人注目的頁頭和標題，包括標題的裝飾，希望大家喜歡這些教程！
下載這個教程中用到的源文件（photoshop格式）終于到了我們CSS教程的第三部分，但在我的Blog上的第一第二部分仍然是很有用的，今天的這部分將是我們最后的一部分關(guān)于設計方面的，在這之后我們將再一步步的花時間來開始我們XHTML和CSS的講述，這是網(wǎng)頁最終結(jié)果的大概樣子（點擊小圖可以看到大圖）:
我選擇了粉紅和綠的顏色做為按扭的普通和鼠標經(jīng)過的狀態(tài)顏色，可能會感覺有一點偏重于女性化的設計。
今天我將做一個完整的講述關(guān)于這個模板設計，你將會得到一些關(guān)于如何制作頁面頭部的知識，以及如何添加一個完全的像裝飾一樣的格調(diào)，以及介紹一些從哪里可以得到特別的創(chuàng)意和一些漂亮的字體的資源網(wǎng)站。
建立頁頭的背景
在第一和第二部分，我們制作了按扭并選擇了我們要的顏色，現(xiàn)在輪到尋找一個包含了我們已經(jīng)首選顏色的圖片來制作我們的頁對頭部的背景了。從我的色板上也可以看出我們用到了綠色和粉紅色，所以我決定用一種很富貴的亮粉色做為主色調(diào)背景，用一個濃的櫻桃色做Banner，用一個綠的東西做標志。
當我在我收集的圖像中尋找時，我看中了這一張圖片，因此我將這張圖片從一個特別紅的顏色改變?yōu)榱艘粋€更為適當?shù)囊粋€略帶桃色的顏色，這個操作可以在photoshop中利用“調(diào)節(jié)”---“色相飽和度”來實現(xiàn)，改變紅色的色相，使其色調(diào)+24
下一步是選擇一個更細的部分能包含我們要的適當?shù)念伾⑶铱梢猿霈F(xiàn)一個有趣的效果。并且在接下來我們還要用一些濾鏡來實現(xiàn)進一步的效果。制作這個背景圖片是需要一些創(chuàng)意的，而且要不斷嘗試你的想法，直到滿意為止。這是我最后選中的我認為可以用來嘗試一下的一部分圖片。
這里顯示的圖片當然只是簡化了的一部分，實際開始時我用到的圖片是一個大一點的（1600x1200px）,我添加了一個我喜歡的濾鏡在它上面，在photoshopCS中可以用到好多生動的濾鏡來實現(xiàn)我們的想法的。你也可以用別的濾鏡來看看效果，這里我最好得到的圖片：
這個背景圖片融合了我們想要的數(shù)種的櫻桃色彩。完成了上面的幾步之后，新建一個圖層我又用鋼筆工具勾了一些曲線路徑，用筆刷工具對路徑描邊。之后改變圖層的透明度為30%，然后再復制這個層，輕移一點，旋轉(zhuǎn)一些，再重復復制幾次。
下載這個制作過程的演示視頻
我添加了一個點綴物在右邊（這是用一個叫Tamuz的字體做的），一會兒將提供一些可能下載到漂亮字體的網(wǎng)站。這是現(xiàn)在的結(jié)果：
我們的Blog模板的標題
網(wǎng)頁的標題完全是按照個人的意源來命名的，并且他應該有一個小的圖標或是標志，圖標應可能的特別一些，容易辯認一些，有時又能表現(xiàn)你自己一些等。在這個教程中我選擇了一個仙人掌，因為他是誠實久遠的像征，而且又有一點兒別的意思。但同時我選擇它做為圖標也是因為這個圖標放在這里顏色上和我們使用的色彩方案在設計上講是很協(xié)調(diào)的。最好，我用叫做Bon Guia的字體寫了一個標題，這就是我們的網(wǎng)頁頭的最終結(jié)果：

提供一些有用的資源下載的網(wǎng)站鏈接：
Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre
Adobe ornamental fonts
free Dingbats fonts
總結(jié)：
這一部分我們就已經(jīng)把網(wǎng)頁頂部logo和Banner的設計做了一個小的示范了，最主要的幾個要點就是色彩的搭配和背景的選取以及小裝飾圖片的添加和濾鏡的運用，大家不妨也按照這個思路去進行一些嘗試，也歡迎大家大膽的不要吝嗇的貼出自己的鏈接！現(xiàn)在油漆桶和鉛筆刷應該扔到一邊了，我們進行第四部分的內(nèi)容，在這一章節(jié)中，將要集中講一下DIV這個容

器的設計。
你需要問的問題是，我們設計的不同部分是什么？一個頁面由哪些不同的部分組成？報著這個想法，我將在

這里回答這些問題講解一下如何為網(wǎng)頁進行切片，如果你是一個網(wǎng)頁設計師，這可能對你來說是很簡單的問

題，因為你已經(jīng)在過去的日子里把表格運用的如火如荼，但現(xiàn)在你要思的是如何不用表格而用DIV容器及CSS

和Xhtml來控制實現(xiàn)一個不但文件體積小而且內(nèi)容和頁面更具親和力的效果。
這是通常的我們見過的網(wǎng)頁構(gòu)成：
頁面頭（the header）
頁左欄（the left）
頁主體內(nèi)容（the content）

導出需要的gif和jpeg圖像
這些是用到你需要導出為gif或jpeg圖像不同

的素材
* 1. 頁面頭文件header
* 2. 導航按扭背景bg_navbutton
* 3. 導航按扭bg_navbutton_over
* 4. 普通小圖標bullet_extlink
* 5. 標題前小圖標bullet_title
好了，你大概會想，“背景圖片怎么辦？”，不錯，它沒有在這兒列出來，這需要一點兒說明，我們想要一

個嚴格的解決方案，因為我們?nèi)匀幌胍诖翱诖笮∽兓臅r候內(nèi)容居中，

這就是你將導出的背景，這是一個1600像素寬，5像

素高的圖片（這已經(jīng)是足夠了，除非你是一個富人，用著30英寸的蘋果機顯示器）。

使用CSS設置背景
這就是我們要使我們的背景居中的CSS
以下內(nèi)容為程序代碼
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
我們的背景圖是一個5像素高的“線條”，它在垂直方向上延伸重復就鋪滿了整個頁面。在水平方向是以瀏覽

器窗口的50%水平方向開始平鋪線條，上邊距為0。Background-attachment: fixed,意思是背景將不隨著內(nèi)容

的滾動而變化，是固定的。我們Body標簽作為我們的放置這些參數(shù)的容器，是因為它要應用到整個頁面。
觀看這時的結(jié)果：點這里

添加我們的第一個DIV
現(xiàn)在我們就要依次添加我們的DIV了。
這是我們的網(wǎng)頁頭的CSS
以下內(nèi)容為程序代碼
#header {
text-align: center;
}
我們用一個ID符號建立我們的網(wǎng)頁頭的容器DIV，一個ID符號總是對應僅有的一個網(wǎng)頁上的元素。一個對此ID

的CSS描述必須是唯一的伴隨這個文件，我們的header是需要居中的，所以我們用到了"text-align:

centered;"，這段代碼就是添加header的內(nèi)容的。
以下內(nèi)容為程序代碼
div id="header" img src="images/header.jpg"
alt="My blog" width="692" height="90" / /div
你可能注意到這時預覽結(jié)果時的圖像沒有在最頂上，所以我們在body標簽里還要加上 "margin: 0"

and"padding: 0"
以下內(nèi)容為程序代碼
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
觀看結(jié)果：點這里
如果以上講的這些對你非常陌生的話，那么你最好閱讀一下這個

完整的關(guān)于CSS的介紹以便有一個更好的了解對

我們現(xiàn)在做的事情，祝你好運！在我們以前的幾個部分里，我們做過了一些很基本的CSS代碼，如果是第一次來這兒的朋友可以先看看前幾部分的內(nèi)容：第一部分、第二部分、第三部分、第四部分，今天我們的教程里將來實現(xiàn)左側(cè)導航欄的制作。
但在開始之前，當建立一個網(wǎng)頁的時候，我們必須總是盡可能讓人容易理解的寫語法，如果你看了第四部分內(nèi)容的評價的話，你可能注意到有人提出了一個建議是，使用h1標簽元素是更好的對于網(wǎng)頁頭部分，因為那是更容易理解的代碼并且它使一個站點更具有親和力容易更好地被搜索引擎收錄。想當然這些更重要一些，所以我已經(jīng)把我們的代碼按照這種方法來修改了。

圖片更換的技術(shù)
這個技術(shù)實際上叫做圖像替換技術(shù)，意思是我們用一個文本來替換真實的圖片在我們的html代碼中。頁面頭的圖片在支持CSS（當我們使用“ background: url(images/header.jpg);”來設置背景圖片時）的瀏覽器里將會顯示出來，并且文本是隱藏的（因為代碼：“text-indent: -9999px;”），因為我們的CSS代碼將文本定位到了我們可見區(qū)域之外。在舊的瀏覽器上或是在盲人用的屏幕閱讀器上你將會看到文本的替代，我們用這種更易理解的代碼。
以下內(nèi)容為程序代碼
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
網(wǎng)頁頭的背景圖像的寬和高是必須定義一些空間的。為了確保我的們的圖像是很精確的置于我們的頁而后頂部位置 margin: 0; padding: 0;也是必須的，此外，我在body標簽中放置text-align: center;是因為所有的內(nèi)容都將要是居中的。然后，有些內(nèi)容是不居中的，所以我們要添加text-align: left;在那里。我們的這個容器margin: 0px auto;意思是它將出現(xiàn)在一個最頂端（0px）和居中的（auto）。
制作導航欄
要制作左側(cè)的導航欄按扭，首先要制作一個ID容器存放里面的內(nèi)容:
以下內(nèi)容為程序代碼
#left {
width: 178px;
}
到目前為止我們需要做的只是定義它的寬度，在這個寬度的left容器中我們放置一個DIV容器作為這個導航，命名為：navcontainer.用CSS建立一個導航最好的方法是用它本身那些導航的點，就像以前用html做好內(nèi)容,然后再定義它的CSS樣式一樣。就像這樣：
以下內(nèi)容為程序代碼
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 這樣會出一個默認的點，而因為我們不想用它的默認的這個點，而要用一個漂亮的背景上的點來代替，所以我們要在CSS中移除這些點，要進行的CSS定義為：
以下內(nèi)容為程序代碼
#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;
} 第一部分代碼定義了這個導航容器的寬度，第二部分定義了這個導航容器的“Ul”標簽.margin: 0;padding: 0;確保了在按扭和按扭之間沒有空隙并且移掉了左邊的縮進。list-style-type: none;移除了標準html格式里的小點，然后是定義里面文字樣式，在最后一行，是用來給我們要做的漂亮的導航按扭每行下面加一條白線。
以下內(nèi)容為程序代碼
#navcontainer a {
display: block;
width: 178px;
height: 22px;
} 這個定義了一個我們的導航欄的“a”標簽，或者叫做“鏈接標簽”。這樣定義之后就會影響到每一個導航欄里的按扭，首先，我們使用display: block;，顯示設置為一個元素的顯示方式，這里設置為“block”是需要讓這個鏈接的塊兒自動調(diào)整到適合大小，后兩行是設置的每個按扭的寬和高。

鼠標經(jīng)過時的狀態(tài)是通過交換背景圖片來實現(xiàn)的，使用的是a:hover 的樣式。這是詳細的代碼：
以下內(nèi)容為程序代碼
#navcontainer a:hover {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
} 顏色的設置是通過改變Color屬性的，而text-decoration: none;是用來防止正規(guī)的鏈接中的下劃線出現(xiàn)的。通常狀況下，為了使你的導航欄能表現(xiàn)的更清晰，更具體，所以我又添加了一個額外的樣式current，這個用來顯示當前網(wǎng)站所處的頁面。代碼如下：
以下內(nèi)容為程序代碼
#navcontainer li a#current {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
} 這個樣式的定義用在導航欄里的鏈接里(li a)，屬性和值都和經(jīng)過狀態(tài)時是一樣的。
現(xiàn)在剩下僅有的事情就是把這個ID添加到我們的html代碼里了：
以下內(nèi)容為程序代碼
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
觀看最后的結(jié)果

一些關(guān)于CSS導航欄的例子可以到這些網(wǎng)站上去看一下：
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://css.maxdesign.com.au/listutorial/

這就是我們的制作導航欄的全過程，我希望大家能喜歡它，并且繼續(xù)關(guān)注我們下一部分的內(nèi)容！這是我們教程的第六部分，現(xiàn)在我們將要填加我們網(wǎng)頁的內(nèi)容部分。

為網(wǎng)站的內(nèi)容添加主體容器
首先我們要在我們的樣式表單中添加一個ID選擇器，設定他的寬度為514像素，
以下內(nèi)容為程序代碼 #content {
width: 514px;
float: left;
}
因為導航欄浮在左側(cè)，我們需要添加一個“float: left;”到我們的“l(fā)eft”ID里，但同時我們需要添加它到我們的“content”ID里，因為它也浮在我們的主ID容器左側(cè)：
以下內(nèi)容為程序代碼
#left {
width: 178px;
float: left;
}
我們填加這個到我們的Xhtml代碼里：http://css.maxdesign.com.au/floatutorial/introduction.htm
以下內(nèi)容為程序代碼 div id="content" this is the right /div 如果上面的這些講解使你感覺有一定難度，我敢保證這些將會對你很有用：
* 更多的關(guān)于Float basics
* 關(guān)于Float的教程
當然，我們的內(nèi)容現(xiàn)在是緊貼著左邊的導航欄的，而我們想要的效果是空出一些空隙的，所以我們要填加一些內(nèi)容容器的樣式：
以下內(nèi)容為程序代碼
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
} 我們也可以用下面的簡短的代碼來實現(xiàn)：
以下內(nèi)容為程序代碼 #content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
} 這樣寫同樣是嚴密的，第一個值是定義了上端空隙，第二個定義了右端空隙，第三個定義了底端空隙，第四個定義了左端空隙。如果我們添加了空隙，我們需要編輯我們的容器的寬度了，因為實際的寬度是隨著這20像素（左邊20像素，右邊0像素）的空隙而變化的。所以我們需要改一下容器的寬為494，但同時因為我也想要右邊出現(xiàn)一些空白，那樣文件看上去不是緊貼著右邊，于是再扣除15像素，就得到了現(xiàn)在的值479。
可能這時有朋友會說了：“喂，你為什么不只用一個緊靠的"width: 494px"再結(jié)合一個"padding-right: 15px"？”呵呵，不錯的想法，其實開始時我也是這樣做的，而且在 Safari, FireFox and Mozilla瀏覽器上都能顯示的很正常，但在IE瀏覽器上就不行了，在IE瀏覽器上顯示時，整個內(nèi)容跳到了我的導航欄的下面（即left ID容器的下面）。顯然在IE中它沒有留下足夠的空白區(qū)來使右邊正好適合。目前我只能這樣解釋。通過這樣的小技巧同樣是完美的在各個瀏覽器上顯示。

添加標題
要添加標題，我們要添加一個header 標簽在我們的Xhtml代碼里面：
以下內(nèi)容為程序代碼 h2 This is the title /h2 現(xiàn)在我們要為它添加一個樣式來定義它的外觀：
以下內(nèi)容為程序代碼
#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;
}
我們使用#content h2在這里意思是我們要給content ID 里的h2定義一個樣式。意思就是說在內(nèi)容DIV里的所有的h2的標簽的顯示樣式效果都是這樣的。我們也可以在這個content ID的外面定義h2標簽的樣式，那樣的話，整個網(wǎng)頁上的h2標簽里的內(nèi)容都顯示同樣的效果。如果你想要用其它的h2樣式例如在left容器，在前面添加這個id將是很方便的。
以下內(nèi)容為程序代碼 div id="content" all h2 tags here will have this style /div 在content h2中的第一行CSS設置了字體的樣式：字體的寬度 (normal),字體的大小（18px）和字體的名稱。類似于padding屬性。這也是用一行的簡寫形式，它用一行的代碼為不同的字體設置了所有的這些屬性值。接下來我們設置文本的顏色，第三步設置背景圖片的屬性。也這是以前我們曾做過的背景圖。同樣是用簡寫的代碼，我定義了背景圖片顏色（transparent），背景圖片路徑background-image和background-repeat這三個屬性寫在一行里就可以全部表示出來。最后兩行代碼是定義了我們的header的總寬度和空隙量。
添加文本內(nèi)容
這是文本內(nèi)容的樣式：
以下內(nèi)容為程序代碼
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
現(xiàn)在我們用一個class，不用在最前面，因為我們反復的要用這個樣式在我們的網(wǎng)頁中。第一行設置了字體的樣式，11像素的字體大小，18像素的行高，第二行我們定義了文本的顏色，在最后我們通過在段與段之間添加10像素的底端空白來增加一些距離。
在我們的Xhtml代碼中的h2標簽的下面我們添加一個段落標簽，用來存放我們的文本內(nèi)容，并將它就用其“text”樣式！
以下內(nèi)容為程序代碼
p Here comes the text /p
添加圖像
這是右對齊的圖像的樣式：
以下內(nèi)容為程序代碼
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
同樣的，我們用一個class來設置它的樣式，是因為我們將要能在我們的網(wǎng)頁上多次應用這個樣式。我們的圖像是浮在我們的文本DIV里的，所以我們添加： "float:right"。然后我們設置一個7個像素的空隙在圖像的四周，并設置了一個白色的背景，這樣將顏色一個白色的區(qū)域圍繞著圖像。然后，我們添加了一個1像素的邊，顏色為#bac1a3。你也可以再添加其它的Class為一個左對齊的圖像，比如叫它“.imageleft”并用同樣的屬性和值，做為浮動的部分，你要修改"float: right" to "float: left".。
這是最后的結(jié)果更正：在我們開始第七部分之前，我想糾正一個我的小錯誤，我告訴你們在DIV標簽之間放那個文本的樣式是不正確的語法，它應該是放在段落之間的。這樣當CSS樣式?jīng)]找到的時候，看上去仍然還可以。這樣做允許你使用頂部或底部的空白來調(diào)整垂直方向的段與段的間距。這種方法我們同樣不需要再用換行標簽了。
不用這種方法，在今天的這個第七部分，我們將填加一個緊貼著瀏覽器的底部的網(wǎng)頁腳，我在這個部分還是不講添加喜歡的鏈接的內(nèi)容，因為它的內(nèi)容太多了。總之，這將是一項堅具的工作，要進行大量的閱讀。
首先，我必須告訴你，完全用CSS建立一個緊貼你的瀏覽器窗口的頁腳和用表格來設計是相當有區(qū)別的。不幸的是，因為safari是如此的年輕的一個瀏覽器，有些東西仍然會丟失，就像我們需要為網(wǎng)頁腳設置的min-width 和 min-height屬性。不過一個好消息說在下一個版本的safari將支持這些。更多的關(guān)于垂直定位的和建立網(wǎng)頁腳的知識可以看這篇文章,實際上，我推薦你先閱讀一下再繼續(xù)下面的內(nèi)容，因為它把這一切解釋的那樣清晰，在這兒我只能講到這么深入了。
閱讀完那篇文章之后，你將知道我們需要建兩個主要的容器來完成這個工作，1個容器存放所有的內(nèi)容，另一個存放網(wǎng)頁腳。我們的包括了整個內(nèi)容的容器是"#container" id，這是非常靠前的一個DIV在代碼里（在body標簽之后），結(jié)束于body標簽之前。換句話說我們的網(wǎng)頁腳DIV應該放置在緊挨"#container" id的DIV下面。
以下內(nèi)容為程序代碼
html
...
body
div id="container" ... /div
div id="footer" ... /div
/body
/html
這是我們?yōu)榫W(wǎng)頁腳添加的CSS代碼：
以下內(nèi)容為程序代碼
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我們添加了一個網(wǎng)頁腳，背景色為濃綠色，在頂部給它一個9像素的邊框。與我們的框架是一個顏色，我們定義了寬度并添加了“clear: both;”，這意思是在網(wǎng)頁腳的左右兩邊不允許浮動的元素！網(wǎng)頁腳的對齊方法是和我們的container一樣的，為“margin: 0px auto;”，這就出現(xiàn)了同樣的居中效果。我們添加了5像素的空白在頂部和底部，為的是留一些空白在文本周圍。網(wǎng)頁腳的內(nèi)容是相對的，關(guān)于元素的定位可以在這里(W3C的網(wǎng)站)看到更多的解釋！
接下來我們?yōu)榫W(wǎng)頁腳上的文本和鏈接添加樣式：
以下內(nèi)容為程序代碼
#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" id的DIV下面，換句話講是在 body 結(jié)束的上面！
然后我們添加這個JavaScript代碼，這是必需的對于確保這個網(wǎng)頁腳在Safari上顯示時緊貼瀏覽器的底部。
以下內(nèi)容為程序代碼
!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight 0) {
var contentHeight = document.getElementById('container').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) = 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//--

注意：一定要確保在你提交到javascript里的ID在你的內(nèi)容里也有同樣的ID名稱

如果你現(xiàn)在瀏覽我們的到目前為止的網(wǎng)頁，你將看到在Safari瀏覽器上網(wǎng)頁腳并不顯示出來，怎么回事呢？不太確定的說法是因為我們有兩個浮動的 containers (#left and #content)在它上面，需要被清除掉，我以前曾經(jīng)寫了一篇文章關(guān)于這種現(xiàn)像，但Eric Meyer發(fā)表了一篇更完整的關(guān)于這個內(nèi)容的文章，將這些事解釋的更清楚！
為了調(diào)整這個，我們需要添加一個清除上面的DIV：
以下內(nèi)容為程序代碼
div /div 我們添加了這個樣式：
以下內(nèi)容為程序代碼
.clear {
clear: both;
}這是最后的結(jié)果
下一個部分我們將介紹在左側(cè)的導航欄下添加喜歡的鏈接，希望你能學到更多喲！這是我們教程的最后一部分，我們將添加喜歡的鏈接在左側(cè)并且鏈接我們的樣式在一個單獨的CSS樣式單里。

添加XHTML代碼
首先，我們要添加xhtml代碼為我們喜歡的鏈接：
以下內(nèi)容為程序代碼
div id="favlinks"
h2 My Favorite Sites /h2
ul
li a Stopdesign /a /li
li a SimpleBits /a /li
li a Mezzoblue /a /li
li a Zeldman /a /li
/ul
/div 在開始我們把我們的鏈接放進一個DIV容器里并給它一個ID名為“favlinks”。這個ID包含我們的鏈接和標題的，必須要通過樣式單來定義 width, margin 和 padding。對于這些鏈接，我們用一個class樣式因為這種方法我們可以重復使用它在我們的頁面上。所以你可以添加類似的帶有一個標題的鏈接列表。但如果你真的那樣做了，一定要確保它是被添加在“favlinks”容器的DIV里的，或者建立另一個DIV ID來包含這些鏈接以便保持每個無素處在正確的位置。

CSS代碼：
首先我們定義我們的“favlinks”div id容器：
以下內(nèi)容為程序代碼
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}我們定義了它的寬度并具給它的左邊一個15像素的空白，以防止它貼到左邊上，同時留一些額外的空當在頂部，這個favlinks容器的寬不像我們的導航欄的寬度178那樣，而是163，是因為我們添加了15像素的左空白。這叫做盒式結(jié)構(gòu)，更精細的內(nèi)容可以看這篇文章：3D by Jon Hicks
以下內(nèi)容為程序代碼
#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}上面的這段CSS是我們的這個標題的樣式，前兩行是定義文字字體大小和顏色的，再往下是padding 和 margin，我們只在底部添了10像素的空白，padding 和 margin是必需的，除非我們不想要在標題和鏈接之間空太開間隔，只是一些空開就夠了，對我來說那就是10個像素了在底部。
以下內(nèi)容為程序代碼
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}在上面的這些代碼是定義我們的列表中的鏈接的，首要的是確保默認的點不顯示出來，并且padding 和 margin是設置到零的。就像我們在第五部分中的導航欄一樣。
以下內(nèi)容為程序代碼
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;
}我們已經(jīng)添加了一個名為“extlinks”的Class來定義我們的鏈接，我們用“ul.extlinks li”來定義ul里的“l(fā)i”標簽的樣式。首先我們添加一個non-repeated背景，定義我們的小點距上頂3像素，距左邊0像素來確保這些點正好對齊我們一會要添加的鏈接。我們定義了字體樣式并添加了一點左側(cè)空白來確呆我們的文本能給我們的點留出一些空白。
以下內(nèi)容為程序代碼
.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;
}在最后我們定義我們的鏈接的一些其它樣式，當鼠標經(jīng)過鏈接時，鏈接出現(xiàn)一個1像素高度的下劃線，為了不出現(xiàn)兩條下載線，我們通過添加“text-decoration: none”隱藏了標準的默認的那條下劃線，字體樣式就不用添加了，因為我們已經(jīng)定義了li標簽的樣式，我們?nèi)匀恍枰砑右粋€背景顏色當鼠標經(jīng)過狀態(tài)的時候，并要為訪問過的鏈接定義一個更淺一點兒的顏色，讓其下劃線變?yōu)樘摼€。這樣別人就知道哪些鏈接是點過的了！
這是最后的結(jié)果
建立外部樣式文件

現(xiàn)在我們已經(jīng)完成了我們的設計，但是你注意到我們所有的CSS樣式都是寫在我們的網(wǎng)頁內(nèi)的，而你們在實際做的過程中盡量不要這樣，在這里我是為了簡單方便的講解才這樣的，你們應該把你們的樣式單寫在一個單獨的外部的樣式文件里，然后鏈接它到你的文檔里。所以我們現(xiàn)在要拷貝所有的樣式并把它們粘貼到一個新的文件里，保存為“styles.css”

鏈接樣式文件
以下內(nèi)容為程序代碼
link rel="stylesheet" type="text/css" media="screen" href="styles.css" /
這里就是最終最終的成品了

現(xiàn)在我們的的系列教程就全部講完了，我很想知道大家在學習過程中的感受，并希望大家能為我指出文中的一些不足，同時也希望大家學完以后設計出自己的文檔拿來這里一起展示一樣，希望你樂意喲! 本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS網(wǎng)頁布局開發(fā)小技巧24則

下一篇：簡述CSS Selector的優(yōu)先級