DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程

1、DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程目錄：第一步：規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建htinl模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div,網(wǎng)頁(yè)基本布局的基礎(chǔ)；第四步：網(wǎng)頁(yè)布局與div浮動(dòng)等；第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn):第六步：頁(yè)面內(nèi)的基本文本的樣式（css）設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁(yè)腳信息（版權(quán)等）的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作（較難）；第十步：解決IE瀏覽器的顯示EUG：第一步：規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站1規(guī)劃網(wǎng)站，本教程將以下圖為例構(gòu)建網(wǎng)站。其基本布局見(jiàn)下圖:MAIN MENUHEADERSIDE BARCONT

2、WTFOOTER主要由五個(gè)部分構(gòu)成：1. Main Navigation 導(dǎo)航條，具有按鈕特效。Width: 760px Height: 50px2. Header網(wǎng)站頭部圖標(biāo)，包含網(wǎng)站的logo和站名。Width: 760px Height: 150px3. Content 網(wǎng)站的主要內(nèi)容。Widtli: 480px Height: Changes depending on content 4.Sidebar 邊框，一些附加信息。Width: 280px Height: Changes dependmg on S.Footer網(wǎng)站底欄，包含版權(quán)信息等。Width: 760px Height:

3、 66px 第二步：創(chuàng)建html模板及文件目錄等1.創(chuàng)建html模板。代碼如下： CompanyNaine - PageNameimport Mcss/niaster.cssH;將其保存為mdex.htmL并創(chuàng)建文件夾css, images,網(wǎng)站結(jié)構(gòu)如下：Q htdocs討 CSS二 images2. 創(chuàng)建網(wǎng)站的人框，即建立一個(gè)寬760px的盒子，它將包含網(wǎng)站的所有元素。 在html文件的和之間寫(xiě)入Hello world 創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫(xiě)入：#page-contamer width: 760px;background: red;控制htm

4、l的id為page-container的盒子的寬為760px,背景為紅色。表現(xiàn)如2現(xiàn)在為了讓盒子居中，寫(xiě)入niargm: auto;,使css文件為：#page-contamer width: 760px;iiiargiii: auto;background: red;現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個(gè)空隙，就需要在css文件中寫(xiě)入：html, body margin: 0;paddmg: 0;第三步：將網(wǎng)站分為五個(gè)div,網(wǎng)頁(yè)基本布局的基礎(chǔ)：1將“第一步”提到的五個(gè)部分都放入盒子中，在htnil文件中寫(xiě)入：Maili NavHe

5、aderSidebar AContentFooter表現(xiàn)如下：2為了將五個(gè)部分區(qū)分開(kāi)來(lái)，我們將這五個(gè)部分用不同的背景顏色標(biāo)示出來(lái)，在css文件寫(xiě) 入：#niaiii-nav background: red;height: 50px;#header background: blue;height: 150px;#sidebar-a background: darkgreen;content background: green;footer background: orange;height: 66px;表現(xiàn)如下：第四步：網(wǎng)頁(yè)布局與div浮動(dòng)等：1浮動(dòng)，首先讓邊框浮動(dòng)到主要內(nèi)容的右邊。用css控制

6、浮動(dòng):#sidebar-a float: right;width: 280px; background: darkgreen; 表現(xiàn)如下：Footer2往主要內(nèi)容的盒子中寫(xiě)入一些文字。在html文件中寫(xiě)入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida emm ut risus. Praesent sapien pums, ultrices a, vaiius ac, suscipit ut, eiiiin Maecenas m lectus Donee in sapien in nibh mtr

7、um gravida. Sed ut mauris. Fusee nialesuada enun vitae lacus euismod vulputate Nullam rhoncus mauris ac metus. Maecenas xulputate aliquam odio Duis scelerisque justo a pede Nam augue lorem, semper at, poita 亡get, placerat eget, pums Suspendisse niattis nunc vestibulum ligula In hac habitasse platea

8、dictumst. 表現(xiàn)如下：但是你可以看到主要內(nèi)容的盒子占據(jù)了整個(gè)page-contamer的寬度，我們需要將Content的第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)：第五步主要介紹除網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的表現(xiàn)(Layout),包括以下內(nèi)容：1. 主導(dǎo)航條；2. 標(biāo)題(heading),包括網(wǎng)站名和內(nèi)容標(biāo)題；3. 內(nèi)容；4. 頁(yè)腳信息，包松版權(quán)，認(rèn)證，副導(dǎo)航條(可選)。加入這些結(jié)構(gòu)時(shí)，為了不破壞原有框架，我們需要在css文件”body，標(biāo)簽(TAG)下加入：.ludden display: none;.hidden即我們加入的類(lèi)(class),這個(gè)類(lèi)可以使頁(yè)面上任意屬于hidde

9、n類(lèi)的元素(element)不顯 示。這些會(huì)在稍后使用，現(xiàn)在請(qǐng)暫時(shí)忘記它?，F(xiàn)在我們加入標(biāo)題(heading):先回到HTML的代碼，至IJ是我們常用的html標(biāo)題代碼。比如我們一般用網(wǎng)站名，網(wǎng)站副標(biāo) 題，內(nèi)容主標(biāo)題等。我們往htnil文件的Header層(Div)加入：Enlighten Designs刷新一下頁(yè)面，你就可以看到巨人的標(biāo)題，和標(biāo)題周?chē)目瞻祝@是因?yàn)闃?biāo)簽的默認(rèn)人小和邊距(margin)造成的，先要消除這些空白，需要加入：hlmargin: 0;paddmg: 0;接下來(lái)是導(dǎo)航條：控制導(dǎo)航條表現(xiàn)的css代碼相對(duì)比較復(fù)雜，我們將在第九步或是第十步中詳細(xì)介紹?，F(xiàn)在html 文件加入導(dǎo)

10、航代碼：AboutSendeesPortfolioContact Us（注：原教程使用了 dl和dt, JOIUX在這使用了更常用的U1和h標(biāo)簽）目前導(dǎo)航條的表現(xiàn)比較糟糕，但是要在以后的教程中介紹其特殊表現(xiàn)，故需要暫時(shí)隱藏導(dǎo)航 條，于是加入：AboutSendeesPortfolioContact Us我們跳一步，先到頁(yè)腳：頁(yè)腳包括兩部分：左邊的版權(quán)，認(rèn)證和右邊的副導(dǎo)航條。我們先要讓副導(dǎo)航條向右浮動(dòng)，就像之前處理Sidebar和Content關(guān)系的一樣，需要加入一 個(gè)新的層（div）:About -Sendees -Ponfblio -Contact Us -Terms of Trade理論上

11、，我們可以控制源文件上的任意元素的浮動(dòng)，但由于IE瀏覽器的EUG,被浮動(dòng)層需 要首先出現(xiàn)在源文件上，也就是說(shuō)我們把副標(biāo)題放在版權(quán)和認(rèn)證的前面：About -Sendees -Ponfolio -Contact Us -Terms of TradeCopyright Enlighten DesignsPowered by Enlighten Hostmg andVadnrni 3.0 CMS刷新你的頁(yè)面，你將看到如下所示（點(diǎn)擊看人圖）：最后我們回到內(nèi)容部分：用表現(xiàn)內(nèi)容標(biāo)題About/Contactus-；用表現(xiàn)段落；用斷行。 AboutEnlighten Designs is an Intern

12、et solutions provider that specialises mfront and back end development To view some of the web sites we have created view oui portfolio.We are currently undergomg a rface lift； so if you have any questions or wouldlike more mforniation about the services we provide please feel flee to contact us.Con

13、tact UsPhone: (07) 853 6060Fax: (07) 853 6060Email:infoenlighten.co.nzP.O Box: 14159, Hamilton, New ZealandMore contact infbnnation.刷新頁(yè)面可以看到在Content層中又出現(xiàn)一些空白，這是由于標(biāo)簽的默認(rèn)邊距(margin)造成 的，我們必須消除這些惱人的空白，當(dāng)又不想把網(wǎng)頁(yè)中所有的標(biāo)簽地邊距都設(shè)為0,這就 需要使用css的子選擇器(child css selector),在htnil的文件結(jié)構(gòu)中，我們想控制的標(biāo)簽( child)是屬于#content層(paren

14、t)的，因此在CSS文件中寫(xiě)入：content 112 margin: 0;paddmg: 0;content p margin: 0;paddmg: 0;這樣我們就告訴瀏覽器，僅僅是隸屬于content層的標(biāo)簽的maigin和padding的值為0!第六步：頁(yè)面內(nèi)的基本文本的樣式(css)設(shè)置：你是不是厭倦了那些人紅人綠的背景，現(xiàn)在是去掉它們的時(shí)候了，只保留導(dǎo)航條的紅色背景。 真是難為您居然能堅(jiān)持學(xué)習(xí)本教程到此，很好，再過(guò)幾步，你就能很好了解css控制整個(gè)網(wǎng) 頁(yè)版面(Layout)的能力。-言歸正傳-先設(shè)置全局的文本樣式：body font-family: Aiial, Helvetica,

15、 Verdana, Sans-serif;font-size: 12px;color: #666666;background:目ffifff;一般我們把body標(biāo)簽放在css文件的頂端，當(dāng)然你要是執(zhí)意要把它放在尾部，瀏覽器不會(huì) 和你計(jì)較o font-fanuly內(nèi)的順序決定字體顯示優(yōu)先級(jí)，比方如果所在計(jì)算機(jī)沒(méi)有Aiial字體, 瀏覽器就會(huì)指向Helvetica字體，依次類(lèi)推；color指字體顏色；background指背景顏色。 如果你都是按本教程的操作，應(yīng)該能看到下圖Enlighten DesignsX owltWW WMWWI MBMI你可以看到內(nèi)容(content)的各塊(block)之

16、間的間隙太小了,而基于最初的設(shè)計(jì),內(nèi)容標(biāo)題(即) 和正文之間的間隙大概是15px,每個(gè)段落的間距也人概是15px,所以在css中寫(xiě)入： content 112 margin: 0;paddmg: 0;paddmg-bottom: 15px;content p margin: 0;paddmg: 0;paddmg-bottom: 15px;然后需要讓content層的四周都空出25px的間隙，這本來(lái)是件很簡(jiǎn)單的事，理論上我們只需 在content的css文件中加入paddmg: 25px;就行了，但是IE給我們上了一課，它的固有BUG 根本不能按我們的想象表現(xiàn)。解決這個(gè)問(wèn)題有兩種辦法。第一種辦法

17、是區(qū)別瀏覽器寫(xiě)入兩種 代碼(HACKIE)因?yàn)殚g隙(padding,Dreamweaver中又叫填充)使用很頻繁，所以我們用 另一種辦法。我們往需要填充的層中加入paddmg層，它的功能僅限于顯示間隙：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida emm ut risus.Praesent sapien pums, ultrices a, vaiius ac, suscipit ut, eiiiin Maecenas m lectusDonee in sapien in nibh mtnim g

18、ravida Sed ut niauris. Fusee nialesuada enun vitae lacus euismod vulputate Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio Duis scelerisque justo a pede Nam augue lorem, semper at, poita eget. placeiat eget, pums Suspendisse niattis nunc vestibulum ligula Ill hac habitasse platea dic

19、tumst.同樣的，再往litinl文件的content層中加入paddmg層。由于padding層的功能僅是制造空隙，所以不要設(shè)置它的寬度，只需在css中添加：#sidebar-a float: right;width: 280px;#sidebar-a paddmg paddmg: 25px;content inargm-nght: 280px;content paddmg paddmg: 25px;就像我們之前用的方法一樣，我們只選擇了類(lèi)(class)為paddmg,且父類(lèi)(parent)為#content 或#sidebar-a 的 7E (element)。接卞來(lái)設(shè)置行距，conte

20、nt和sidebar-a的行距需要加寬，但在css中是沒(méi)有行距(leading)這種 屬性(attribute)的，但是有行高(1 ine-height)屬性，因此往css中寫(xiě)入：#sidebar-a float: right;width: 280px;line-height: 18px;content inargm-nght: 280px;Ime-height: 18px;現(xiàn)在可以看到標(biāo)題”about”和”contact us“顯得相當(dāng)突兀，這是因?yàn)槲覀兪褂玫淖煮w并不是一種 網(wǎng)頁(yè)字體，我們需要將其替換為以下圖片，并將其存放于/iniages/headmgs/文件夾中： ABOUTCONTAC

21、T US替換方法為，在htnil文件的標(biāo)簽中寫(xiě)入：于是得到下圖：Enlighten DesignsMB PM MB K9COM ACT MWK第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)：為實(shí)現(xiàn)設(shè)計(jì)時(shí)的網(wǎng)頁(yè)頭部效果，我們需要以下兩幅圖:/miages/headers/aboiit.jpg/miages/geneiaVlogo.enlighten.gifenlightendesigns首先我們給header層添加背景圖案：#header height: 150px;background: #db6dl6uH(./imag 亡 s/headeis/about.jpg);我們使用的背景屬性為一些簡(jiǎn)寫(xiě)的屬

22、性名，用其能規(guī)定背景的顏色，圖案，圖案的位置，是 否重復(fù)以及如何重復(fù)。之所以把背景色設(shè)為桔黃色，是因?yàn)楫?dāng)用戶(hù)使瀏覽器屏蔽圖片時(shí)， 網(wǎng)站的頭部不會(huì)變的一片空白。應(yīng)該注意到圖片的路徑是相對(duì)于css的存放位置而言的，而 不是html文件，因此有”./”。接著替換掉標(biāo)簽里的Enlighten Designs1:logo.eiiiighten圖片浮在頭部的左上方，我們需要設(shè)置的屬性值為：hlmargin: 0;paddmg: 0;float: right;margiii-top: 57px;paddmg-right: 31px;這樣我們使存在于層的圖片向右浮動(dòng)，并且上邊距（niargm-top）為57p

23、x,右間隙（paddmg-nght） 為31px,如下圖所示（點(diǎn)擊看大圖）：注意：細(xì)心的你可能會(huì)發(fā)現(xiàn)我們使用了 padding-nght而不是margm-nght,這是因?yàn)镮E的怪 毛病不少，它會(huì)在不定的地方無(wú)法正確顯 示margin-nglit/left屬性，所以使用了 padding（間 隙,Dreamweaver中又被稱(chēng)為填充）屬性。Jomx提示:希望大家在以后的css編寫(xiě)過(guò)程中，盡量使用paddmg屬性，以免造成瀏覽器調(diào)試麻煩。 第八步：頁(yè)腳信息（版權(quán)等）的表現(xiàn)設(shè)置：首先需要控制頁(yè)腳的文本顯示：footer cleai botli;height: 66px;fbnt-fainily:

24、Tahoma、AiiaL Helvetica, Sans-serif;font-size: lOpx;color: #c9c9c9;接著我們需要設(shè)置存在鏈接的文本的顯示，在這我們沒(méi)有改變文本的顏色（仍然為#c9c9c9）, 而只是讓下劃線消失：footer a color: #c9c9c9;text-decoration: none;但是我們想讓那些存在鏈接的文本，在鼠標(biāo)懸停在其上方時(shí)變色為存db6dl6：footer a:hover color: #db6dl6;然后我們想給頁(yè)腳加上灰色的上邊框，在foo點(diǎn)層的四周設(shè)置一些間隙，并加大文本的行距: footer cleai botli;hei

25、ght: 66px;font-family: Tahonia, AiiaL Helvetica, Sans-serif;font-size: lOpx;color: #c9c9c9;border-top: lpx solid #efefef;paddmg: 13px 25px;lme-height: 18px;最后我們需要做的就是讓副導(dǎo)航層（#altnav）向右浮動(dòng)，需要指出的是，浮動(dòng)層是必須設(shè)置寬 度（width）才能正常浮動(dòng)的，所以我們把掙almav的寬度設(shè)置為350px,略寬于文本的長(zhǎng)度（為 了讓副標(biāo)題的文字顯示完全），然后讓文本向右對(duì)齊：#footer #altnav width: 3

26、50px;float: right;text-align: right;如果你按照以上方法，將得到如下圖所示的頁(yè)腳樣式（點(diǎn)擊看人圖）：第九步：導(dǎo)航條的制作（較難）：Jomx 注：導(dǎo)航條之所以放在第九步講，是因?yàn)閷?dǎo)航條制作是本教程中最難的部分，自然也是技術(shù)含量 最高的地方導(dǎo)航條的制作可易可難，但這里介紹的相對(duì)較難，您能堅(jiān)持到這一步已經(jīng)很不 易，如果你只是有個(gè)導(dǎo)航條就滿足的話，請(qǐng)參看第八步的副導(dǎo)航條的制作。先去掉導(dǎo)航條的紅色背景，還有就是移除html文件中main-nav層的class=”hidden”,使導(dǎo)航 條的內(nèi)容顯示出來(lái)。我們實(shí)現(xiàn)導(dǎo)航條圖片的變換的方法是純css代碼的，不包含任何js或 是

27、flash,因此我們所用的圖片是4幅分別由三個(gè)小圖組合而成的圖片，如下所示，并將這4 幅圖保存于/iniages/nav/文件夾中：ABOUTABOUTABOUTSERVICESSERVICESSERVICESPORTFOLIOPORTFOLIOPORTFOUOCONTACT USCONTACT USCONTACT US我們實(shí)現(xiàn)導(dǎo)航條的動(dòng)態(tài)效果如下圖所示:ABOUTASOUTVWWAMI MIAsuictw在網(wǎng)頁(yè)顯示的只是圖中紅框標(biāo)出的部分，如果把每幅圖分為上，中，下三部分的話，未發(fā)生 動(dòng)作時(shí)顯示上部，當(dāng)光標(biāo)懸停時(shí)，顯示的是中部，被選擇時(shí)則顯示下部。接下來(lái)進(jìn)入CSS代碼部分，先往CSS文件中寫(xiě)

28、入：/* Mam Navigation */#niam-nav height: 50px;#niaiii-nav ul margin: 0; padding: 0; 注意：/* Mam Navigation */為增加css文件可讀性的說(shuō)明，不會(huì)影響表現(xiàn)。#niam-nav的height屬性定義了 main-nav層的高度；mainnav ulM則定義niain-nav層中列 表的屬性，在這里先定義其niaigm和paddmg為0。根據(jù)先前的設(shè)計(jì)，導(dǎo)航條應(yīng)該和左邊有一定的距離，這就需要設(shè)置niain-nav層的左邊距 (paddmg-left)為llpx,但由于IE5和Mac瀏覽器的BUG,需

29、要加入以下代碼：/* IE5 Mac Hack */#niaiii-nav paddmg-left: llpx; /*/#niaiii-nav paddmg-left: llpx; oveiilow: hidden; 嚴(yán) End Hack */現(xiàn)在你可以看到導(dǎo)航列表距左邊有l(wèi)lpx的距離，但是列表項(xiàng)目是豎排的，將，即列表項(xiàng)目 向左對(duì)齊就能使其從左到右橫向排列：#niaiii-nav li float: left; 為了使列表項(xiàng)目的尺寸和容納它的層保持一致，并利用浮動(dòng)屬性使列表項(xiàng)目的文本隱藏，寫(xiě) 入：#niaiii-nav li a display: block;height: Opx !imp

30、ortant;height /*/:50px; /* IE 5/Win hack */paddmg: 50px 0 0 0;overflow: hidden;background-repeat: no-repeat;接著，要實(shí)現(xiàn)當(dāng)光標(biāo)懸停于列表項(xiàng)目上時(shí)，顯示背景圖片的中部，因此需要將背景圖片向上 移動(dòng)50px,寫(xiě)入：#niaiii-nav li a:hover background-position: 0 -50px;給各個(gè)列表項(xiàng)目設(shè)置寬度和背景圖片的路徑：#niam-nav li#about,#niam-nav li#about a widtli: 71px; background-imag

31、e: url(./iniages/nav/about.gif); #main-iiav li 存 services,#main-iiav li存services a width: 84px; backgiound-image: url(./iniages/nav/seivices.gif); #niam-nav li#portfblio5#niam-nav li#portfblio a width: 95px; background-image: url(./miage&,nav/ponfblio.gif); #niam-nav li#contact,#niam-nav li#contact

32、a width: 106px; background-image: url(./iinages/nav/contact.gif); 最后我們要做的就是，當(dāng)列表項(xiàng)目被選時(shí)，顯示背景圖片的下部。為此我們需要增加一些 CSS代碼對(duì)原有的CSS表現(xiàn)作一些修改：body.about li#about,body.about li#about a,body.sendees li#serx-ices.body.sendees li#serxdces a,body.poitfblio li#portfolio,body.poitfblio li#portfolio a,body.contact li#conta

33、ct,body.contact li#contact a background-position: 0 -lOOpx;以上看似龐大的css選擇器可以識(shí)別body標(biāo)簽的類(lèi)(class),如html中為：以上css選擇器就讓li#about,li#about a,的背景向上移動(dòng)lOOpx,使其顯示背景圖片的卞部。 如果我們希塑網(wǎng)站頭部背景圖片也根據(jù)body標(biāo)簽的類(lèi)進(jìn)行變換，就需修改css的deader為: body.about#header height: 150px;background: #db6dl6uH(/imag 亡 s/head 亡 is/aboutjpg);至此就完成了 ”About”網(wǎng)頁(yè)的制作，依此類(lèi)推，修改htinl中body的類(lèi)為 sendces/ponfolio/coiitact制作相應(yīng)htiiil文件并分別保存。在css文件中添加各個(gè)網(wǎng)頁(yè)相應(yīng)的頭部背景圖片路徑(如services網(wǎng)頁(yè)的頭部背景圖片為 services.jpg,在css中添加如下代碼):body, sendees#header height: 150px;background: #db6dl6url(. ./iinages/headers/seivices.jpg);然后用超級(jí)鏈接將這些網(wǎng)頁(yè)連接起來(lái)，就組