設(shè)計(jì)一個(gè)基于CSS的網(wǎng)頁(yè)

這是一個(gè)教你如何一步一步學(xué)習(xí)建立基于CSS制作網(wǎng)站的開(kāi)始，這個(gè)教程將由幾個(gè)部分組成。第一部分是講述如何在photoshop中制作導(dǎo)航按扭的；第二部分將講述背景的制作，再下一個(gè)是講述標(biāo)題(header)和頁(yè)面的設(shè)計(jì)規(guī)劃的，在最后是CSS和XHTML的應(yīng)用的執(zhí)行。 現(xiàn)在也許有些人想知道為什么在我的教程里要以導(dǎo)航按扭的制作來(lái)開(kāi)始，呵呵，其實(shí)我最初的目的是要講述一段關(guān)于這些簡(jiǎn)單按扭的制作方法的小教程的，但是即然這個(gè)想法開(kāi)始了，為什么不做一個(gè)全面的講解呢！ 建立一個(gè)像玻璃面一樣的導(dǎo)航按扭 在photoshop里新建一個(gè)RGB模式的文件，大小為178x122像素，背景色為白色，然后新建一個(gè)圖層（起名為“button”），然后填充這個(gè)圖層用灰色（#ececec），再建一個(gè)新的圖層（起名為“highlight”），并畫(huà)一個(gè)一個(gè)像素的白的加亮的線分別在左邊上上邊（用鉛筆工具，1個(gè)像素的筆頭）。用“減淡工具”（大小為20像素的筆刷，透明度為50%）將左側(cè)的白線條減淡一些形成上下漸變的效果。

新建一個(gè)圖層（起名為“bullet”），畫(huà)一堆像素小點(diǎn)用鉛筆工具（1px,#727272）,當(dāng)然你也可以按照自己的意愿來(lái)選擇顏色和大小。

用鋼筆工具畫(huà)一個(gè)類(lèi)似于玻璃斜面效果的曲線路徑（顏色為#d6d6d6）。

好了，你已經(jīng)做好了自己的按扭，沒(méi)有什么難度吧？ 建立鼠標(biāo)經(jīng)過(guò)時(shí)效果 建立鼠標(biāo)經(jīng)過(guò)時(shí)要顯示的圖像效果最簡(jiǎn)便的方法便是復(fù)制我們的圖層，然后改變它的顏色。現(xiàn)在，你需要到每一個(gè)圖層去它們的顏色來(lái)建立這個(gè)鼠標(biāo)經(jīng)過(guò)時(shí)的圖像的效果，這是我在這個(gè)例子里用到的顏色設(shè)置： 按扭的背景層：#bfe3ff 曲線斜面層：#a5d1f3 小像素點(diǎn)層：#e4001b 下載這個(gè)教程中用到的photoShop源文件！ 了解這個(gè)系列教程的這些基本的知識(shí)是必需的！

今天我將帶大家一起開(kāi)始關(guān)于我們的基于CSS的網(wǎng)頁(yè)制作的第二部分，這一部分是講述關(guān)于改變一個(gè)適當(dāng)?shù)念伾渲玫暮蜑槲覀兊木W(wǎng)頁(yè)制作一個(gè)漂亮的背景圖案的，在第一部分我們落下了這個(gè)，所以在這兒補(bǔ)上。 就像大家所知道的，我的最初的意圖是給你們講述一個(gè)小的如何用簡(jiǎn)單的方法制作漂亮的立體按扭的教程，，所以這個(gè)教程的第一部分可能對(duì)你來(lái)說(shuō)有點(diǎn)兒?jiǎn)我?，以下我們將講述關(guān)于色彩方案的設(shè)計(jì)在這個(gè)教程的第二部分，這實(shí)際上來(lái)講是我們的第一步，按扭的創(chuàng)建，背景的制作等。 選擇你的色彩方案 無(wú)論如何，你都可能有一個(gè)領(lǐng)先，選擇恰當(dāng)?shù)念伾渲檬侵陵P(guān)重要，它反映了你是誰(shuí)，你喜歡什么等！

實(shí)際上，解釋給你，你選擇什么或許不是至關(guān)重要的，盡管我總是努力遵循以下幾個(gè)小的提示： 1、使用至少一種能對(duì)比突現(xiàn)出來(lái)的顏色來(lái)用于強(qiáng)調(diào)在你的頁(yè)面上，用它來(lái)做文本鏈接的顏色將是很顯眼的，可見(jiàn)性就比較好。 2、務(wù)必不要用太多的不同的顏色，否則你將以一個(gè)沒(méi)有重點(diǎn)的混亂設(shè)計(jì)而告終。我最多只用3種顏色，兩種相差不多的和一種高亮的。 3、從這兩種相差不多的當(dāng)中，來(lái)通過(guò)明暗的變化而調(diào)節(jié)，如果你只用了不到3種顏色，那可能會(huì)看上去有一些單調(diào)的，盡管你也用了足夠多的明暗變化。以下幾種配色方案可能對(duì)你實(shí)際工作有所幫助：

在photoshop中使用色彩飽和度的調(diào)節(jié)來(lái)觀看你所選擇的顏色的變化，你會(huì)發(fā)現(xiàn)，實(shí)際上上面的這些例子的顏色都是通過(guò)這個(gè)方法得到的

以下我們?cè)僦v一下畫(huà)像素圖案 現(xiàn)在是教大家畫(huà)像素圖案的時(shí)間！在photoShop中新建一個(gè)文件，大小為30x30像素，色彩模式為RGB，背景色可以是你想要的任意顏色，用鉛筆工具畫(huà)一些像素點(diǎn)，這是一些你可以開(kāi)始時(shí)照著做的例子：

花大量的時(shí)間來(lái)制作這些像素圖案，實(shí)際上是一種通過(guò)不同的方法的嘗試，任何我們所不知道的技巧只有通過(guò)親自嘗試自己的想法才會(huì)成為技巧。我所做的大多數(shù)網(wǎng)頁(yè)都是先開(kāi)始于背景圖案的制作，選擇一個(gè)接近于背景色的顏色，然后來(lái)畫(huà)些像素點(diǎn)。如果我建立的背景圖案是一些線，我可以在photoshop中把那個(gè)包含一條線的圖層復(fù)制一份新的出來(lái)，然后向左或右或上下移動(dòng)一點(diǎn)兒?；蛘咴俑淖円幌峦该鞫群蛯舆x項(xiàng)等。

這些放大的圖案是真實(shí)的像素點(diǎn)的分布，被裁切開(kāi)的右邊正好又和左邊相連從而鋪開(kāi)就構(gòu)成了一個(gè)完整的循環(huán)。

下一步我們將要講述實(shí)際的頁(yè)面框架的設(shè)計(jì)和規(guī)劃，核心內(nèi)容將是講如何制作一個(gè)引人注目的頁(yè)頭和標(biāo)題，包括標(biāo)題的裝飾，希望大家喜歡這些教程！ 下載這個(gè)教程中用到的源文件（photoshop格式）

終于到了我們CSS教程的第三部分，但在我的Blog上的第一第二部分仍然是很有用的，今天的這部分將是我們最后的一部分關(guān)于設(shè)計(jì)方面的，在這之后我們將再一步步的花時(shí)間來(lái)開(kāi)始我們XHTML和CSS的講述，這是網(wǎng)頁(yè)最終結(jié)果的大概樣子（點(diǎn)擊小圖可以看到大圖）:

我選擇了粉紅和綠的顏色做為按扭的普通和鼠標(biāo)經(jīng)過(guò)的狀態(tài)顏色，可能會(huì)感覺(jué)有一點(diǎn)偏重于女性化的設(shè)計(jì)。 今天我將做一個(gè)完整的講述關(guān)于這個(gè)模板設(shè)計(jì)，你將會(huì)得到一些關(guān)于如何制作頁(yè)面頭部的知識(shí)，以及如何添加一個(gè)完全的像裝飾一樣的格調(diào)，以及介紹一些從哪里可以得到特別的創(chuàng)意和一些漂亮的字體的資源網(wǎng)站。 建立頁(yè)頭的背景

在第一和第二部分，我們制作了按扭并選擇了我們要的顏色，現(xiàn)在輪到尋找一個(gè)包含了我們已經(jīng)選顏色的圖片來(lái)制作我們的頁(yè)對(duì)頭部的背景了。從我的色板上也可以看出我們用到了綠色和粉紅色，所以我決定用一種很富貴的亮粉色做為主色調(diào)背景，用一個(gè)濃的櫻桃色做Banner，用一個(gè)綠的東西做標(biāo)志。 當(dāng)我在我收集的圖像中尋找時(shí)，我看中了這一張圖片，因此我將這張圖片從一個(gè)特別紅的顏色改變?yōu)榱艘粋€(gè)更為適當(dāng)?shù)囊粋€(gè)略帶桃色的顏色，這個(gè)操作可以在photoshop中利用“調(diào)節(jié)”---“色相飽和度”來(lái)實(shí)現(xiàn)，改變紅色的色相，使其色調(diào)+24

下一步是選擇一個(gè)更細(xì)的部分能包含我們要的適當(dāng)?shù)念伾⑶铱梢猿霈F(xiàn)一個(gè)有趣的效果。并且在接下來(lái)我們還要用一些濾鏡來(lái)實(shí)現(xiàn)進(jìn)一步的效果。制作這個(gè)背景圖片是需要一些創(chuàng)意的，而且要不斷嘗試你的想法，直到滿意為止。這是我最后選中的我認(rèn)為可以用來(lái)嘗試一下的一部分圖片。

這里顯示的圖片當(dāng)然只是簡(jiǎn)化了的一部分，實(shí)際開(kāi)始時(shí)我用到的圖片是一個(gè)大一點(diǎn)的（1600x1200px）,我添加了一個(gè)我喜歡的濾鏡在它上面，在photoshopCS中可以用到好多生動(dòng)的濾鏡來(lái)實(shí)現(xiàn)我們的想法的。你也可以用別的濾鏡來(lái)看看效果，這里我最好得到的圖片：

這個(gè)背景圖片融合了我們想要的數(shù)種的櫻桃色彩。完成了上面的幾步之后，新建一個(gè)圖層我又用鋼筆工具勾了一些曲線路徑，用筆刷工具對(duì)路徑描邊。之后改變圖層的透明度為30%，然后再?gòu)?fù)制這個(gè)層，輕移一點(diǎn)，旋轉(zhuǎn)一些，再重復(fù)復(fù)制幾次。 下載這個(gè)制作過(guò)程的演示視頻 我添加了一個(gè)點(diǎn)綴物在右邊（這是用一個(gè)叫Tamuz的字體做的），一會(huì)兒將提供一些可能下載到漂亮字體的網(wǎng)站。這是現(xiàn)在的結(jié)果：

我們的Blog模板的標(biāo)題 網(wǎng)頁(yè)的標(biāo)題完全是按照個(gè)人的意源來(lái)命名的，并且他應(yīng)該有一個(gè)小的圖標(biāo)或是標(biāo)志，圖標(biāo)應(yīng)可能的特別一些，容易辯認(rèn)一些，有時(shí)又能表現(xiàn)你自己一些等。在這個(gè)教程中我選擇了一個(gè)仙人掌，因?yàn)樗钦\(chéng)實(shí)久遠(yuǎn)的像征，而且又有一點(diǎn)兒別的意思。但同時(shí)我選擇它做為圖標(biāo)也是因?yàn)檫@個(gè)圖標(biāo)放在這里顏色上和我們使用的色彩方案在設(shè)計(jì)上講是很協(xié)調(diào)的。最好，我用叫做Bon Guia的字體寫(xiě)了一個(gè)標(biāo)題，這就是我們的網(wǎng)頁(yè)頭的最終結(jié)果：

提供一些有用的資源下載的網(wǎng)站鏈接： Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre Adobe ornamental fonts free Dingbats fonts 總結(jié)： 這一部分我們就已經(jīng)把網(wǎng)頁(yè)頂部logo和Banner的設(shè)計(jì)做了一個(gè)小的示范了，最主要的幾個(gè)要點(diǎn)就是色彩的搭配和背景的選取以及小裝飾圖片的添加和濾鏡的運(yùn)用，大家不妨也按照這個(gè)思路去進(jìn)行一些嘗試，也歡迎大家大膽的不要吝嗇的貼出自己的鏈接！

現(xiàn)在油漆桶和鉛筆刷應(yīng)該扔到一邊了，我們進(jìn)行第四部分的內(nèi)容，在這一章節(jié)中，將要集中講一下DIV這個(gè)容

器的設(shè)計(jì)。 你需要問(wèn)的問(wèn)題是，我們?cè)O(shè)計(jì)的不同部分是什么？一個(gè)頁(yè)面由哪些不同的部分組成？報(bào)著這個(gè)想法，我將在

這里回答這些問(wèn)題講解一下如何為網(wǎng)頁(yè)進(jìn)行切片，如果你是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，這可能對(duì)你來(lái)說(shuō)是很簡(jiǎn)單的問(wèn)

題，因?yàn)槟阋呀?jīng)在過(guò)去的日子里把表格運(yùn)用的如火如荼，但現(xiàn)在你要思的是如何不用表格而用DIV容器及CSS

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

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

的素材 * 1. 頁(yè)面頭文件header * 2. 導(dǎo)航按扭背景bg_navbutton * 3. 導(dǎo)航按扭bg_navbutton_over * 4. 普通小圖標(biāo)bullet_extlink * 5. 標(biāo)題前小圖標(biāo)bullet_title 好了，你大概會(huì)想，“背景圖片怎么辦？”，不錯(cuò)，它沒(méi)有在這兒列出來(lái)，這需要一點(diǎn)兒說(shuō)明，我們想要一

個(gè)嚴(yán)格的解決方案，因?yàn)槲覀內(nèi)匀幌胍诖翱诖笮∽兓臅r(shí)候內(nèi)容居中，

這就是你將導(dǎo)出的背景，這是一個(gè)1600像素寬，5像

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

使用CSS設(shè)置背景 這就是我們要使我們的背景居中的CSS 以下內(nèi)容為程序代碼 body { background: #F7F7F6 url(images/background.gif) repeat-y 50% 0; background-attachment: fixed; }

我們的背景圖是一個(gè)5像素高的“線條”，它在垂直方向上延伸重復(fù)就鋪滿了整個(gè)頁(yè)面。在水平方向是以瀏覽

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

的滾動(dòng)而變化，是固定的。我們Body標(biāo)簽作為我們的放置這些參數(shù)的容器，是因?yàn)樗獞?yīng)用到整個(gè)頁(yè)面。 觀看這時(shí)的結(jié)果：點(diǎn)這里

添加我們的第一個(gè)DIV 現(xiàn)在我們就要依次添加我們的DIV了。 這是我們的網(wǎng)頁(yè)頭的CSS 以下內(nèi)容為程序代碼 #header { text-align: center; }

我們用一個(gè)ID符號(hào)建立我們的網(wǎng)頁(yè)頭的容器DIV，一個(gè)ID符號(hào)總是對(duì)應(yīng)僅有的一個(gè)網(wǎng)頁(yè)上的元素。一個(gè)對(duì)此ID

的CSS描述必須是唯一的伴隨這個(gè)文件，我們的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>

你可能注意到這時(shí)預(yù)覽結(jié)果時(shí)的圖像沒(méi)有在最頂上，所以我們?cè)赽ody標(biāo)簽里還要加上 "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é)果：點(diǎn)這里 如果以上講的這些對(duì)你非常陌生的話，那么你最好閱讀一下這個(gè)

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

我們現(xiàn)在做的事情，祝你好運(yùn)！

在我們以前的幾個(gè)部分里，我們做過(guò)了一些很基本的CSS代碼，如果是第一次來(lái)這兒的朋友可以先看看前幾部分的內(nèi)容：第一部分、第二部分、第三部分、第四部分，今天我們的教程里將來(lái)實(shí)現(xiàn)左側(cè)導(dǎo)航欄的制作。 但在開(kāi)始之前，當(dāng)建立一個(gè)網(wǎng)頁(yè)的時(shí)候，我們必須總是盡可能讓人容易理解的寫(xiě)語(yǔ)法，如果你看了第四部分內(nèi)容的評(píng)價(jià)的話，你可能注意到有人提出了一個(gè)建議是，使用h1標(biāo)簽元素是更好的對(duì)于網(wǎng)頁(yè)頭部分，因?yàn)槟鞘歉菀桌斫獾拇a并且它使一個(gè)站點(diǎn)更具有親和力容易更好地被搜索引擎收錄。想當(dāng)然這些更重要一些，所以我已經(jīng)把我們的代碼按照這種方法來(lái)修改了。

圖片更換的技術(shù) 這個(gè)技術(shù)實(shí)際上叫做圖像替換技術(shù)，意思是我們用一個(gè)文本來(lái)替換真實(shí)的圖片在我們的html代碼中。頁(yè)面頭的圖片在支持CSS（當(dāng)我們使用“ background: url(images/header.jpg);”來(lái)設(shè)置背景圖片時(shí)）的瀏覽器里將會(huì)顯示出來(lái)，并且文本是隱藏的（因?yàn)榇a：“text-indent: -9999px;”），因?yàn)槲覀兊腃SS代碼將文本定位到了我們可見(jiàn)區(qū)域之外。在舊的瀏覽器上或是在盲人用的屏幕閱讀器上你將會(huì)看到文本的替代，我們用這種更易理解的代碼。 以下內(nèi)容為程序代碼 h1 { width: 692px; height: 90px; text-indent: -9999px; background: url(images/header.jpg); margin: 0; padding: 0; }

網(wǎng)頁(yè)頭的背景圖像的寬和高是必須定義一些空間的。為了確保我的們的圖像是很精確的置于我們的頁(yè)而后頂部位置 margin: 0; padding: 0;也是必須的，此外，我在body標(biāo)簽中放置text-align: center;是因?yàn)樗械膬?nèi)容都將要是居中的。然后，有些內(nèi)容是不居中的，所以我們要添加text-align: left;在那里。我們的這個(gè)容器margin: 0px auto;意思是它將出現(xiàn)在一個(gè)最頂端（0px）和居中的（auto）。 制作導(dǎo)航欄 要制作左側(cè)的導(dǎo)航欄按扭，首先要制作一個(gè)ID容器存放里面的內(nèi)容: 以下內(nèi)容為程序代碼 #left { width: 178px; }

到目前為止我們需要做的只是定義它的寬度，在這個(gè)寬度的left容器中我們放置一個(gè)DIV容器作為這個(gè)導(dǎo)航，命名為：navcontainer.用CSS建立一個(gè)導(dǎo)航最好的方法是用它本身那些導(dǎo)航的點(diǎn)，就像以前用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> 這樣會(huì)出一個(gè)默認(rèn)的點(diǎn)，而因?yàn)槲覀儾幌胗盟哪J(rèn)的這個(gè)點(diǎn)，而要用一個(gè)漂亮的背景上的點(diǎn)來(lái)代替，所以我們要在CSS中移除這些點(diǎn)，要進(jìn)行的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; } 第一部分代碼定義了這個(gè)導(dǎo)航容器的寬度，第二部分定義了這個(gè)導(dǎo)航容器的“Ul”標(biāo)簽.margin: 0;padding: 0;確保了在按扭和按扭之間沒(méi)有空隙并且移掉了左邊的縮進(jìn)。list-style-type: none;移除了標(biāo)準(zhǔn)html格式里的小點(diǎn)，然后是定義里面文字樣式，在最后一行，是用來(lái)給我們要做的漂亮的導(dǎo)航按扭每行下面加一條白線。 以下內(nèi)容為程序代碼 #navcontainer a { display: block; width: 178px; height: 22px; } 這個(gè)定義了一個(gè)我們的導(dǎo)航欄的“a”標(biāo)簽，或者叫做“鏈接標(biāo)簽”。這樣定義之后就會(huì)影響到每一個(gè)導(dǎo)航欄里的按扭，首先，我們使用display: block;，顯示設(shè)置為一個(gè)元素的顯示方式，這里設(shè)置為“block”是需要讓這個(gè)鏈接的塊兒自動(dòng)調(diào)整到適合大小，后兩行是設(shè)置的每個(gè)按扭的寬和高。

鼠標(biāo)經(jīng)過(guò)時(shí)的狀態(tài)是通過(guò)交換背景圖片來(lái)實(shí)現(xiàn)的，使用的是a:hover 的樣式。這是詳細(xì)的代碼： 以下內(nèi)容為程序代碼 #navcontainer a:hover { background: url(bg_navbutton_over.gif); color: #A5003B; text-decoration: none; } 顏色的設(shè)置是通過(guò)改變Color屬性的，而text-decoration: none;是用來(lái)防止正規(guī)的鏈接中的下劃線出現(xiàn)的。通常狀況下，為了使你的導(dǎo)航欄能表現(xiàn)的更清晰，更具體，所以我又添加了一個(gè)額外的樣式current，這個(gè)用來(lái)顯示當(dāng)前網(wǎng)站所處的頁(yè)面。代碼如下： 以下內(nèi)容為程序代碼 #navcontainer li a#current { background: url(bg_navbutton_over.gif); color: #A5003B; text-decoration: none; } 這個(gè)樣式的定義用在導(dǎo)航欄里的鏈接里(li a)，屬性和值都和經(jīng)過(guò)狀態(tài)時(shí)是一樣的。 現(xiàn)在剩下僅有的事情就是把這個(gè)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導(dǎo)航欄的例子可以到這些網(wǎng)站上去看一下： http://css.maxdesign.com.au/listamatic/ http://css.maxdesign.com.au/listamatic2/ http://css.maxdesign.com.au/listutorial/

這就是我們的制作導(dǎo)航欄的全過(guò)程，我希望大家能喜歡它，并且繼續(xù)關(guān)注我們下一部分的內(nèi)容！

這是我們教程的第六部分，現(xiàn)在我們將要填加我們網(wǎng)頁(yè)的內(nèi)容部分。

為網(wǎng)站的內(nèi)容添加主體容器 首先我們要在我們的樣式表單中添加一個(gè)ID選擇器，設(shè)定他的寬度為514像素， 以下內(nèi)容為程序代碼 #content { width: 514px; float: left; }

因?yàn)閷?dǎo)航欄浮在左側(cè)，我們需要添加一個(gè)“float: left;”到我們的“l(fā)eft”ID里，但同時(shí)我們需要添加它到我們的“content”ID里，因?yàn)樗哺≡谖覀兊闹鱅D容器左側(cè)： 以下內(nèi)容為程序代碼 #left { width: 178px; float: left; }

我們填加這個(gè)到我們的Xhtml代碼里：http://css.maxdesign.com.au/floatutorial/introduction.htm 以下內(nèi)容為程序代碼

<div id="content">this is the right</div> 如果上面的這些講解使你感覺(jué)有一定難度，我敢保證這些將會(huì)對(duì)你很有用： * 更多的關(guān)于Float basics * 關(guān)于Float的教程 當(dāng)然，我們的內(nèi)容現(xiàn)在是緊貼著左邊的導(dǎo)航欄的，而我們想要的效果是空出一些空隙的，所以我們要填加一些內(nèi)容容器的樣式： 以下內(nèi)容為程序代碼 #content { width: 479px; float: left; padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 20px; } 我們也可以用下面的簡(jiǎn)短的代碼來(lái)實(shí)現(xiàn)： 以下內(nèi)容為程序代碼

#content { width: 479px; float: left; padding: 15px 0 10px 20px; } 這樣寫(xiě)同樣是嚴(yán)密的，第一個(gè)值是定義了上端空隙，第二個(gè)定義了右端空隙，第三個(gè)定義了底端空隙，第四個(gè)定義了左端空隙。如果我們添加了空隙，我們需要編輯我們的容器的寬度了，因?yàn)閷?shí)際的寬度是隨著這20像素（左邊20像素，右邊0像素）的空隙而變化的。所以我們需要改一下容器的寬為494，但同時(shí)因?yàn)槲乙蚕胍疫叧霈F(xiàn)一些空白，那樣文件看上去不是緊貼著右邊，于是再扣除15像素，就得到了現(xiàn)在的值479。 可能這時(shí)有朋友會(huì)說(shuō)了：“喂，你為什么不只用一個(gè)緊靠的"width: 494px"再結(jié)合一個(gè)"padding-right: 15px"？”呵呵，不錯(cuò)的想法，其實(shí)開(kāi)始時(shí)我也是這樣做的，而且在 Safari, FireFox and Mozilla瀏覽器上都能顯示的很正常，但在IE瀏覽器上就不行了，在IE瀏覽器上顯示時(shí)，整個(gè)內(nèi)容跳到了我的導(dǎo)航欄的下面（即left ID容器的下面）。顯然在IE中它沒(méi)有留下足夠的空白區(qū)來(lái)使右邊正好適合。目前我只能這樣解釋。通過(guò)這樣的小技巧同樣是完美的在各個(gè)瀏覽器上顯示。

添加標(biāo)題 要添加標(biāo)題，我們要添加一個(gè)header 標(biāo)簽在我們的Xhtml代碼里面： 以下內(nèi)容為程序代碼

<h2>This is the title</h2> 現(xiàn)在我們要為它添加一個(gè)樣式來(lái)定義它的外觀： 以下內(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定義一個(gè)樣式。意思就是說(shuō)在內(nèi)容DIV里的所有的h2的標(biāo)簽的顯示樣式效果都是這樣的。我們也可以在這個(gè)content ID的外面定義h2標(biāo)簽的樣式，那樣的話，整個(gè)網(wǎng)頁(yè)上的h2標(biāo)簽里的內(nèi)容都顯示同樣的效果。如果你想要用其它的h2樣式例如在left容器，在前面添加這個(gè)id將是很方便的。 以下內(nèi)容為程序代碼

<div id="content">all h2 tags here will have this style</div> 在content h2中的第一行CSS設(shè)置了字體的樣式： 字體的寬度 (normal),字體的大?。?8px）和字體的名稱(chēng)。類(lèi)似于padding屬性。這也是用一行的簡(jiǎn)寫(xiě)形式，它用一行的代碼為不同的字體設(shè)置了所有的這些屬性值。接下來(lái)我們?cè)O(shè)置文本的顏色，第三步設(shè)置背景圖片的屬性。也這是以前我們?cè)鲞^(guò)的背景圖。同樣是用簡(jiǎn)寫(xiě)的代碼，我定義了背景圖片顏色（transparent），背景圖片路徑background-image和background-repeat這三個(gè)屬性寫(xiě)在一行里就可以全部表示出來(lái)。最后兩行代碼是定義了我們的header的總寬度和空隙量。 添加文本內(nèi)容 這是文本內(nèi)容的樣式： 以下內(nèi)容為程序代碼 .text { font: 11px/18px Verdana, Arial, Helvetica, sans-serif; color: #5B604C; margin-bottom: 10px; }

現(xiàn)在我們用一個(gè)class，不用在最前面，因?yàn)槲覀兎磸?fù)的要用這個(gè)樣式在我們的網(wǎng)頁(yè)中。第一行設(shè)置了字體的樣式，11像素的字體大小，18像素的行高，第二行我們定義了文本的顏色，在最后我們通過(guò)在段與段之間添加10像素的底端空白來(lái)增加一些距離。 在我們的Xhtml代碼中的h2標(biāo)簽的下面我們添加一個(gè)段落標(biāo)簽，用來(lái)存放我們的文本內(nèi)容，并將它就用其“text”樣式！ 以下內(nèi)容為程序代碼 <p class="text">Here comes the text</p>

添加圖像 這是右對(duì)齊的圖像的樣式： 以下內(nèi)容為程序代碼 .imageright { float: right; padding: 7px; background-color: #ffffff; border: 1px solid #bac1a3; }

同樣的，我們用一個(gè)class來(lái)設(shè)置它的樣式，是因?yàn)槲覀儗⒁茉谖覀兊木W(wǎng)頁(yè)上多次應(yīng)用這個(gè)樣式。我們的圖像是浮在我們的文本DIV里的，所以我們添加： "float:right"。然后我們?cè)O(shè)置一個(gè)7個(gè)像素的空隙在圖像的四周，并設(shè)置了一個(gè)白色的背景，這樣將顏色一個(gè)白色的區(qū)域圍繞著圖像。然后，我們添加了一個(gè)1像素的邊，顏色為#bac1a3。你也可以再添加其它的Class為一個(gè)左對(duì)齊的圖像，比如叫它“.imageleft”并用同樣的屬性和值，做為浮動(dòng)的部分，你要修改"float: right" to "float: left".。 這是最后的結(jié)果

更正：在我們開(kāi)始第七部分之前，我想糾正一個(gè)我的小錯(cuò)誤，我告訴你們?cè)贒IV標(biāo)簽之間放那個(gè)文本的樣式是不正確的語(yǔ)法，它應(yīng)該是放在段落之間的。這樣當(dāng)CSS樣式?jīng)]找到的時(shí)候，看上去仍然還可以。這樣做允許你使用頂部或底部的空白來(lái)調(diào)整垂直方向的段與段的間距。這種方法我們同樣不需要再用換行標(biāo)簽了。 不用這種方法，在今天的這個(gè)第七部分，我們將填加一個(gè)緊貼著瀏覽器的底部的網(wǎng)頁(yè)腳，我在這個(gè)部分還是不講添加喜歡的鏈接的內(nèi)容，因?yàn)樗膬?nèi)容太多了。總之，這將是一項(xiàng)堅(jiān)具的工作，要進(jìn)行大量的閱讀。 首先，我必須告訴你，完全用CSS建立一個(gè)緊貼你的瀏覽器窗口的頁(yè)腳和用表格來(lái)設(shè)計(jì)是相當(dāng)有區(qū)別的。不幸的是，因?yàn)閟afari是如此的年輕的一個(gè)瀏覽器，有些東西仍然會(huì)丟失，就像我們需要為網(wǎng)頁(yè)腳設(shè)置的min-width 和 min-height屬性。不過(guò)一個(gè)好消息說(shuō)在下一個(gè)版本的safari將支持這些。更多的關(guān)于垂直定位的和建立網(wǎng)頁(yè)腳的知識(shí)可以看這篇文章,實(shí)際上，我推薦你先閱讀一下再繼續(xù)下面的內(nèi)容，因?yàn)樗堰@一切解釋的那樣清晰，在這兒我只能講到這么深入了。 閱讀完那篇文章之后，你將知道我們需要建兩個(gè)主要的容器來(lái)完成這個(gè)工作，1個(gè)容器存放所有的內(nèi)容，另一個(gè)存放網(wǎng)頁(yè)腳。我們的包括了整個(gè)內(nèi)容的容器是"#container" id，這是非?？壳暗囊粋€(gè)DIV在代碼里（在body標(biāo)簽之后），結(jié)束于body標(biāo)簽之前。換句話說(shuō)我們的網(wǎng)頁(yè)腳DIV應(yīng)該放置在緊挨"#container" id的DIV下面。 以下內(nèi)容為程序代碼 <html> ... <body> <div id="container"> ... </div> <div id="footer"> ... </div> </body> </html>

這是我們?yōu)榫W(wǎng)頁(yè)腳添加的CSS代碼： 以下內(nèi)容為程序代碼 #footer { margin: 0px auto; position: relative; background-color: #717F51; border-top: 9px solid #F7F7F6; width: 692px; padding: 5px 0; clear: both; }

我們添加了一個(gè)網(wǎng)頁(yè)腳，背景色為濃綠色，在頂部給它一個(gè)9像素的邊框。與我們的框架是一個(gè)顏色，我們定義了寬度并添加了“clear: both;”，這意思是在網(wǎng)頁(yè)腳的左右兩邊不允許浮動(dòng)的元素！網(wǎng)頁(yè)腳的對(duì)齊方法是和我們的container一樣的，為“margin: 0px auto;”，這就出現(xiàn)了同樣的居中效果。我們添加了5像素的空白在頂部和底部，為的是留一些空白在文本周?chē)＞W(wǎng)頁(yè)腳的內(nèi)容是相對(duì)的，關(guān)于元素的定位可以在這里(W3C的網(wǎng)站)看到更多的解釋?zhuān)?接下來(lái)我們?yōu)榫W(wǎng)頁(yè)腳上的文本和鏈接添加樣式： 以下內(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標(biāo)簽為我們的文本： <div id="footer"><h2>....</h2></div> 我們添加這點(diǎn)兒代碼在緊挨"#container" id的DIV下面，換句話講是在<body>結(jié)束的上面！ 然后我們添加這個(gè)JavaScript代碼，這是必需的對(duì)于確保這個(gè)網(wǎng)頁(yè)腳在Safari上顯示時(shí)緊貼瀏覽器的底部。 以下內(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(); } //--> 注意：一定要確保在你提交到j(luò)avascript里的ID在你的內(nèi)容里也有同樣的ID名稱(chēng)

如果你現(xiàn)在瀏覽我們的到目前為止的網(wǎng)頁(yè)，你將看到在Safari瀏覽器上網(wǎng)頁(yè)腳并不顯示出來(lái)，怎么回事呢？不太確定的說(shuō)法是因?yàn)槲覀冇袃蓚€(gè)浮動(dòng)的 containers (#left and #content)在它上面，需要被清除掉，我以前曾經(jīng)寫(xiě)了一篇文章關(guān)于這種現(xiàn)像，但Eric Meyer發(fā)表了一篇更完整的關(guān)于這個(gè)內(nèi)容的文章，將這些事解釋的更清楚！ 為了調(diào)整這個(gè)，我們需要添加一個(gè)清除上面的DIV： 以下內(nèi)容為程序代碼 <div class="clear"> </div>

我們添加了這個(gè)樣式： 以下內(nèi)容為程序代碼 .clear { clear: both; }

這是最后的結(jié)果 下一個(gè)部分我們將介紹在左側(cè)的導(dǎo)航欄下添加喜歡的鏈接，希望你能學(xué)到更多喲！

這是我們教程的最后一部分，我們將添加喜歡的鏈接在左側(cè)并且鏈接我們的樣式在一個(gè)單獨(dú)的CSS樣式單里。

添加X(jué)HTML代碼 首先，我們要添加xhtml代碼為我們喜歡的鏈接： 以下內(nèi)容為程序代碼 <div id="favlinks"> <h2>My Favorite Sites</h2> <ul class="extlinks"> <li><a >Stopdesign</a></li> <li><a >SimpleBits</a></li> <li><a >Mezzoblue</a></li> <li><a >Zeldman</a></li> </ul> </div>

在開(kāi)始我們把我們的鏈接放進(jìn)一個(gè)DIV容器里并給它一個(gè)ID名為“favlinks”。這個(gè)ID包含我們的鏈接和標(biāo)題的，必須要通過(guò)樣式單來(lái)定義 width, margin 和 padding。對(duì)于這些鏈接，我們用一個(gè)class樣式因?yàn)檫@種方法我們可以重復(fù)使用它在我們的頁(yè)面上。所以你可以添加類(lèi)似的帶有一個(gè)標(biāo)題的鏈接列表。但如果你真的那樣做了，一定要確保它是被添加在“favlinks”容器的DIV里的，或者建立另一個(gè)DIV ID來(lái)包含這些鏈接以便保持每個(gè)無(wú)素處在正確的位置。

CSS代碼： 首先我們定義我們的“favlinks”div id容器： 以下內(nèi)容為程序代碼 #favlinks { width: 163px; padding-left: 15px; margin-top: 10px; }

我們定義了它的寬度并具給它的左邊一個(gè)15像素的空白，以防止它貼到左邊上，同時(shí)留一些額外的空當(dāng)在頂部，這個(gè)favlinks容器的寬不像我們的導(dǎo)航欄的寬度178那樣，而是163，是因?yàn)槲覀兲砑恿?5像素的左空白。這叫做盒式結(jié)構(gòu)，更精細(xì)的內(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是我們的這個(gè)標(biāo)題的樣式，前兩行是定義文字字體大小和顏色的，再往下是padding 和 margin，我們只在底部添了10像素的空白，padding 和 margin是必需的，除非我們不想要在標(biāo)題和鏈接之間空太開(kāi)間隔，只是一些空開(kāi)就夠了，對(duì)我來(lái)說(shuō)那就是10個(gè)像素了在底部。 以下內(nèi)容為程序代碼 #favlinks ul { margin: 0; padding: 0; list-style-type: none; }

在上面的這些代碼是定義我們的列表中的鏈接的，首要的是確保默認(rèn)的點(diǎn)不顯示出來(lái)，并且padding 和 margin是設(shè)置到零的。就像我們?cè)诘谖宀糠种械膶?dǎo)航欄一樣。 以下內(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)添加了一個(gè)名為“extlinks”的Class來(lái)定義我們的鏈接，我們用“ul.extlinks li”來(lái)定義ul里的“l(fā)i”標(biāo)簽的樣式。首先我們添加一個(gè)non-repeated背景，定義我們的小點(diǎn)距上頂3像素，距左邊0像素來(lái)確保這些點(diǎn)正好對(duì)齊我們一會(huì)要添加的鏈接。我們定義了字體樣式并添加了一點(diǎn)左側(cè)空白來(lái)確呆我們的文本能給我們的點(diǎn)留出一些空白。 以下內(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; }

在最后我們定義我們的鏈接的一些其它樣式，當(dāng)鼠標(biāo)經(jīng)過(guò)鏈接時(shí)，鏈接出現(xiàn)一個(gè)1像素高度的下劃線，為了不出現(xiàn)兩條下載線，我們通過(guò)添加“text-decoration: none”隱藏了標(biāo)準(zhǔn)的默認(rèn)的那條下劃線，字體樣式就不用添加了，因?yàn)槲覀円呀?jīng)定義了li標(biāo)簽的樣式，我們?nèi)匀恍枰砑右粋€(gè)背景顏色當(dāng)鼠標(biāo)經(jīng)過(guò)狀態(tài)的時(shí)候，并要為訪問(wèn)過(guò)的鏈接定義一個(gè)更淺一點(diǎn)兒的顏色，讓其下劃線變?yōu)樘摼€。這樣別人就知道哪些鏈接是點(diǎn)過(guò)的了！ 這是最后的結(jié)果 建立外部樣式文件

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

鏈接樣式文件 以下內(nèi)容為程序代碼 <link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> 本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：設(shè)計(jì)一個(gè)基于CSS的網(wǎng)頁(yè)
網(wǎng)頁(yè)網(wǎng)址：http://bm7419.com/news37/318087.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、面包屑導(dǎo)航、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、定制網(wǎng)站、用戶體驗(yàn)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)