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

2、布局見下圖 4規(guī)劃網(wǎng)站主要由五個(gè)部分構(gòu)成規(guī)劃網(wǎng)站主要由五個(gè)部分構(gòu)成 1. Main Navigation 導(dǎo)航條導(dǎo)航條，具有按鈕特效。，具有按鈕特效。 Width: 760px Height: 50px 2. Header 網(wǎng)站頭部圖標(biāo)網(wǎng)站頭部圖標(biāo)，包含網(wǎng)站的，包含網(wǎng)站的logo和站名。和站名。 Width: 760px Height: 150px 3. Content 網(wǎng)站的主要內(nèi)容網(wǎng)站的主要內(nèi)容。 Width: 480px Height: Changes depending on content 4. Sidebar 邊框邊框，一些附加信息。，一些附加信息。 Width: 280px He

3、ight: Changes depending on content5. Footer 網(wǎng)站底欄網(wǎng)站底欄，包含版權(quán)信息等。，包含版權(quán)信息等。 Width: 760px Height: 66px。 5HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建第二步：創(chuàng)建htmlhtml模板及文件目錄等；模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)

4、計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；6第二步：創(chuàng)建第二步：創(chuàng)建htmlhtml模板及文件目錄等模板及文件目錄等 1. 創(chuàng)建創(chuàng)建html模板模板 代碼如下代碼如下 CompanyName - PageName import css/master.css;將其保存為index.html,并在ROOT下創(chuàng)建文件夾css和images72.2.創(chuàng)建網(wǎng)站的大框，即建立一個(gè)寬760px的盒子，它將包含網(wǎng)站的所有元素。 在html文件的和之間寫入Hello world.創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫入：#page-containe

5、r width: 760px;background: red;8控制html的id為page-container的盒子的寬為760px，背景為紅色：u 為了讓盒子居中，寫入margin: auto;，使css文件為：#page-container width: 760px;margin: auto; background: red;u 盒子和瀏覽器的頂端有空隙。由于瀏覽器的默認(rèn)的填充和邊界造成的。 消除空隙需要在css文件中寫入：html, body margin: 0;padding: 0;margin: auto是左右自適應(yīng)兩邊距離一樣9HTML+CSS+DIVHTML+CSS+DIV建站

6、建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)第三步：將網(wǎng)站分為五個(gè)divdiv，網(wǎng)頁基本布局的基礎(chǔ)；，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；10第三步：將網(wǎng)站分為五個(gè)第三步：將網(wǎng)站分為五個(gè)divdiv，網(wǎng)頁基本布局的基礎(chǔ)，網(wǎng)頁基本布局的基礎(chǔ) 1.1.將將“第一步第一步”提到的五個(gè)部分都放入盒子中，在提到的

7、五個(gè)部分都放入盒子中，在htmlhtml文件中寫入：文件中寫入： Main Nav Header Sidebar A Content Footer 表現(xiàn)如下：表現(xiàn)如下： 112.為了將五個(gè)部分區(qū)分開來，我們將這五個(gè)部分用不同的背景顏色標(biāo)示出來，在css文件寫入 #main-nav background: red;height: 50px;#header background: blue;height: 150px;#sidebar-a background: darkgreen;#content background: green;#footer background: orange;heig

8、ht: 66px; 12表現(xiàn)如下 13HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與第四步：網(wǎng)頁布局與divdiv浮動(dòng)等；浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；1415第四步：網(wǎng)頁布局與第四步：網(wǎng)頁布局與divdiv浮動(dòng)等浮動(dòng)等 1.浮動(dòng)，首先讓邊框浮動(dòng)

9、到主要內(nèi)容的右邊。用css控制浮動(dòng)#sidebar-a float: right;width: 280px;background: darkgreen;表現(xiàn)如下 162. 往主要內(nèi)容的盒子中寫入文字。在html文件中寫入 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.Donec in sapien i

10、n nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac ha

11、bitasse platea dictumst. 17表現(xiàn)如下 問題：問題： Content的盒子占據(jù)了整個(gè)page-container的寬度，需要將 #content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。 css代碼如下：#content margin-right: 280px;background: green;18同時(shí)往邊框里寫入一些文字。在html文件中寫入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus,

12、 ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta

13、eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.19表現(xiàn)如下 2021問題：問題： 網(wǎng)站的底框跑到邊框的下邊了。之前將邊框向右浮動(dòng)，浮動(dòng)可以理解為它位于整個(gè)盒子之上的另一層。因此我們往css中寫入： #footer clear: both;background: orange;height: 66px; 主要是用在div套div的結(jié)構(gòu)中。如果內(nèi)div是浮動(dòng)的，一般都需要clear浮動(dòng)，不然的話內(nèi)div會(huì)超出外div的框架22表現(xiàn)如下 2

14、3HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；2425第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn) 第五步主要介

15、紹除網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的表現(xiàn)(Layout),包括以下內(nèi)容: 1.主導(dǎo)航條；主導(dǎo)航條；2.標(biāo)題標(biāo)題(heading),包括網(wǎng)站名和內(nèi)容標(biāo)題；包括網(wǎng)站名和內(nèi)容標(biāo)題；3.內(nèi)容；內(nèi)容；4.頁腳信息頁腳信息,包括版權(quán)包括版權(quán),認(rèn)證認(rèn)證,副導(dǎo)航條副導(dǎo)航條(可選可選)。 加入這些結(jié)構(gòu)時(shí)，為了不破壞原有框架，需要在css文件“body”標(biāo)簽后面加入:.hidden display: none;“.hidden”即加入的類(class), 可以使頁面上任意屬于hidden類的元素(element)不顯示-稍后介紹和使用。26現(xiàn)在加入標(biāo)題現(xiàn)在加入標(biāo)題(heading) (heading) 先回到先回到H

16、TMLHTML的代碼，的代碼，到到是常用的是常用的htmlhtml標(biāo)題代碼。比如一般用標(biāo)題代碼。比如一般用網(wǎng)站名網(wǎng)站名，網(wǎng)站副標(biāo)題網(wǎng)站副標(biāo)題,內(nèi)容主標(biāo)題內(nèi)容主標(biāo)題等。往等。往htmlhtml文件的文件的HeaderHeader層層(Div)(Div)加入加入: : Enlighten Designs 刷新一下頁面，可以看到巨大的標(biāo)題，和標(biāo)題周圍的空白，因?yàn)樗⑿乱幌马撁妫梢钥吹骄薮蟮臉?biāo)題，和標(biāo)題周圍的空白，因?yàn)闃?biāo)簽的默認(rèn)大小和邊距標(biāo)簽的默認(rèn)大小和邊距(margin)(margin)造成的，先要消除這些空白造成的，先要消除這些空白, ,需要加入：需要加入： h1 margin: 0;paddin

17、g: 0; 27接下來是導(dǎo)航條 控制導(dǎo)航條表現(xiàn)的控制導(dǎo)航條表現(xiàn)的csscss代碼相對(duì)比較復(fù)雜，在第九步或是第十步代碼相對(duì)比較復(fù)雜，在第九步或是第十步中詳細(xì)介紹。現(xiàn)在中詳細(xì)介紹。現(xiàn)在htmlhtml文件加入導(dǎo)航代碼文件加入導(dǎo)航代碼: : AboutServicesPortfolioContact Us 28 目前導(dǎo)航條的表現(xiàn)比較糟糕，以后將介紹其特殊表現(xiàn)，這里首先暫時(shí)隱藏導(dǎo)航條隱藏導(dǎo)航條,加入： AboutServicesPortfolioContact Us 29我們跳一步，先到頁腳： 頁腳包括頁腳包括兩部分：左邊的版權(quán)兩部分：左邊的版權(quán), ,認(rèn)證和右邊的副導(dǎo)航條認(rèn)證和右邊的副導(dǎo)航條。先要讓副

18、導(dǎo)航條向右浮動(dòng)，就像之前處理先要讓副導(dǎo)航條向右浮動(dòng)，就像之前處理SidebarSidebar和和ContentContent關(guān)系的一樣，關(guān)系的一樣，需要加入一個(gè)新的層需要加入一個(gè)新的層(div): (div): About - Services - Portfolio - Contact Us - Terms of Trade 3031 理論上，我們可以控制源文件上的任意元素的浮動(dòng)，但由于理論上，我們可以控制源文件上的任意元素的浮動(dòng)，但由于IEIE瀏覽瀏覽器的器的BUGBUG，被浮動(dòng)層需要首先出現(xiàn)在源文件上，也就是說我們把副標(biāo)題，被浮動(dòng)層需要首先出現(xiàn)在源文件上，也就是說我們把副標(biāo)題放在版權(quán)和認(rèn)

19、證的前面：放在版權(quán)和認(rèn)證的前面： About - Services - Portfolio - Contact Us - Terms of TradeCopyright © Enlighten DesignsPowered by Enlighten Hosting andVadmin 3.0 CMS 32刷新頁面，將看到如下所示 3334最后我們回到內(nèi)容部分：最后我們回到內(nèi)容部分：用表現(xiàn)內(nèi)容標(biāo)題About,Contact us；用表現(xiàn)段落；用斷行。 AboutEnlighten Designs is an Internet solutions provider that sp

20、ecialises in front and back end development. To view some of the web sites we have created view our portfolio.We are currently undergoing a face lift, so if you have any questions or would like more information about the services we provide please feel free to contact us.Contact UsPhone: (07) 853 60

21、60Fax: (07) 853 6060Email: infoenlighten.co.nzP.O Box: 14159, Hamilton, New ZealandMore contact information 35 小技巧：小技巧：刷新頁面可以看到在刷新頁面可以看到在ContentContent層中又出現(xiàn)一些空白層中又出現(xiàn)一些空白，這是由于，這是由于標(biāo)簽的默認(rèn)邊距標(biāo)簽的默認(rèn)邊距(margin)(margin)造成的，必須消除空白，當(dāng)又不想把網(wǎng)頁造成的，必須消除空白，當(dāng)又不想把網(wǎng)頁中所有的中所有的標(biāo)簽地邊距都設(shè)為標(biāo)簽地邊距都設(shè)為0 0，這就需要使用，這就需要使用csscss的子選擇器的子選

22、擇器(child (child css selector),css selector),在在htmlhtml的文件結(jié)構(gòu)中，我們想控制的的文件結(jié)構(gòu)中，我們想控制的標(biāo)簽標(biāo)簽( (childchild) )是屬于是屬于#content#content層層( (parentparent) )的的, ,因此在因此在csscss文件中寫入：文件中寫入： #content h2 margin: 0;padding: 0;#content p margin: 0;padding: 0; 瀏覽器可以識(shí)別僅僅是隸屬于瀏覽器可以識(shí)別僅僅是隸屬于contentcontent層的層的標(biāo)簽的標(biāo)簽的marginmargin

23、和和paddingpadding的值為的值為0 0！ 36HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式第六步：頁面內(nèi)的基本文本的樣式(css)(css)設(shè)置；設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；3738第六步：頁面內(nèi)的基本文本的樣式第六步：頁面內(nèi)的基本文

24、本的樣式(css)(css)設(shè)置設(shè)置首先：首先：去掉紅綠等背景，只保留導(dǎo)航條的紅色背景，即刪除去掉紅綠等背景，只保留導(dǎo)航條的紅色背景，即刪除csscss文件中的文件中的backgroundbackground屬性。屬性。然后：然后：先設(shè)置全局的文本樣式：先設(shè)置全局的文本樣式： body font-family: Arial, Helvetica, Verdana, Sans-serif;font-size: 12px;color: #666666;background: #ffffff; 一般把一般把bodybody標(biāo)簽放在標(biāo)簽放在csscss文件的頂端文件的頂端。font-familyfon

25、t-family內(nèi)的順序決定字體顯內(nèi)的順序決定字體顯示優(yōu)先級(jí)，示優(yōu)先級(jí)， 比方如果所在計(jì)算機(jī)沒有比方如果所在計(jì)算機(jī)沒有ArialArial字體，瀏覽器就會(huì)指向字體，瀏覽器就會(huì)指向HelveticaHelvetica字體，依次類推；字體，依次類推；colorcolor指字體顏色；指字體顏色；backgroundbackground指背景顏色。指背景顏色。 3940 可以看到內(nèi)容內(nèi)容(content)(content)的各塊的各塊(block)(block)之間的間隙太小之間的間隙太小，在css中寫入： #content h2 margin: 0;padding: 0;padding-bottom

26、: 15px;#content p margin: 0;padding: 0;padding-bottom: 15px; 41 然后需要讓contentcontent層的四周都空出25px的間隙：方案一：可以在#content#content的的csscss文件中加入文件中加入padding: 25pxpadding: 25px； 方案二：需要填充的層中加入padding層，它的功能僅限于顯示間隙： Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent s

27、apien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, sempe

28、r at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. 42同樣的，再往html文件的content層中加入padding層。然后在css中添加: #sidebar-a float: right;width: 280px;#sidebar-a .padding padding: 25px;#content margin-right: 280px;#content .padding padding: 25px; 43 接

29、下來設(shè)置行距，接下來設(shè)置行距，contentcontent和和sidebar-asidebar-a的行距需要加寬的行距需要加寬，但在，但在csscss中是中是沒有行距沒有行距(leading)(leading)這種屬性這種屬性(attribute)(attribute)的，但是有行高的，但是有行高(line-height)(line-height)屬屬性，因此往性，因此往csscss中寫入：中寫入： #sidebar-a float: right;width: 280px;line-height: 18px;#content margin-right: 280px;line-height: 1

30、8px; 44 45HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與第七步：網(wǎng)站頭部圖標(biāo)與logologo部分的設(shè)計(jì)；部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；46第七步：網(wǎng)站頭部圖標(biāo)與第七步：網(wǎng)站頭部圖標(biāo)與logologo部分的設(shè)計(jì)部分的設(shè)計(jì) 為實(shí)現(xiàn)設(shè)計(jì)時(shí)的網(wǎng)

31、頁頭部效果，我們需要以下兩幅圖：/images/headers/about.jpg /images/general/logo_enlighten.gif 47首先給首先給#header#header層添加背景圖案層添加背景圖案 #header height: 150px;background: #db6d16url(./images/headers/about.jpg); 48接著替換掉接著替換掉標(biāo)簽里的標(biāo)簽里的Enlighten Designs Enlighten Designs logo_enlightenlogo_enlighten圖片浮在頭部的左上方，我們需要設(shè)置圖片浮在頭部的左上方，

32、我們需要設(shè)置的屬性值為的屬性值為 h1 margin: 0;padding: 0;float: right;margin-top: 57px;padding-right: 31px; 49 這樣我們使存在于這樣我們使存在于層的圖片向右浮動(dòng)，并且上邊距層的圖片向右浮動(dòng)，并且上邊距(margin-top)(margin-top)為為57px57px，右間隙，右間隙(padding-right)(padding-right)為為31px31px，如下圖所示，如下圖所示 50HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建ht

33、ml模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息第八步：頁腳信息( (版權(quán)等版權(quán)等) )的表現(xiàn)設(shè)置；的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；51第八步：頁腳信息第八步：頁腳信息( (版權(quán)等版權(quán)等) )的表現(xiàn)設(shè)置的表現(xiàn)設(shè)置 首先需要控制頁腳的文本顯示： #footer clear: both;height: 66px;font-family: Tahoma, Arial, Helvetic

34、a, Sans-serif;font-size: 10px;color: #c9c9c9; 接著設(shè)置存在鏈接存在鏈接的文本的顯示，例如 讓 下劃線消失下劃線消失:#footer a color: #c9c9c9;text-decoration: none; 52如果想讓存在鏈接的文本存在鏈接的文本，在鼠標(biāo)懸停鼠標(biāo)懸停在其上方時(shí)變色變色為#db6d16： #footer a:hover color: #db6d16; 如果想給頁腳加上灰色的上邊框頁腳加上灰色的上邊框，在footer層的四周設(shè)置一些間隙，并加大文本的行距： #footer clear: both;height: 66px;font

35、-family: Tahoma, Arial, Helvetica, Sans-serif;font-size: 10px;color: #c9c9c9;border-top: 1px solid #efefef;padding: 13px 25px;line-height: 18px; 邊框線的類型有：邊框線的類型有：dotted（由點(diǎn)（由點(diǎn)組成的虛線）組成的虛線） solid（實(shí)線）（實(shí)線）53 如果想讓副導(dǎo)航層副導(dǎo)航層(#altnav)(#altnav)向右浮動(dòng)向右浮動(dòng)，需要設(shè)置需要設(shè)置#altnav#altnav的寬度的寬度 并且想讓文本向右對(duì)齊：并且想讓文本向右對(duì)齊： #footer

36、 #altnav width: 350px;float: right;text-align: right; 得到如下圖所示的頁腳樣式得到如下圖所示的頁腳樣式 54HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)；第四步：網(wǎng)頁布局與div浮動(dòng)等；第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作第九步：導(dǎo)航

37、條的制作( (較難較難) )；55第九步：導(dǎo)航條的制作第九步：導(dǎo)航條的制作( (較難較難) ) 1. 先去掉導(dǎo)航條的紅色背景導(dǎo)航條的紅色背景， 2. 移除html文件中main-nav層的class=hiddenclass=hidden,使導(dǎo)航條的內(nèi) 容顯示出來。 3. 將這4幅圖保存于 /images/nav/文件夾中56導(dǎo)航條的動(dòng)態(tài)效果如下圖所示導(dǎo)航條的動(dòng)態(tài)效果如下圖所示 在網(wǎng)頁顯示的只是圖中紅框圖中紅框標(biāo)出的部分，如果把每幅圖分為上，中，每幅圖分為上，中，下三部分下三部分的話，未發(fā)生未發(fā)生動(dòng)作時(shí)顯示上部，當(dāng)光標(biāo)懸停光標(biāo)懸停時(shí)，顯示的是中部，被選擇被選擇時(shí)則顯示下部。 57接下來進(jìn)入接下來

38、進(jìn)入csscss代碼部分，先往代碼部分，先往csscss文件中寫入文件中寫入 /* Main Navigation */#main-nav height: 50px; #main-nav ul margin: 0; padding: 0; 定義了定義了main-navmain-nav層的高度層的高度定義定義main-navmain-nav層中列表的屬性層中列表的屬性 如果想讓如果想讓導(dǎo)航條導(dǎo)航條和左邊有一定的距離，需要設(shè)置和左邊有一定的距離，需要設(shè)置main-navmain-nav層的層的左邊距左邊距(padding-left)(padding-left) ： /* IE5 Mac Hack

39、*/ #main-nav padding-left: 11px; /*/ #main-nav padding-left: 11px; overflow: hidden; /* End Hack */ 58可以發(fā)現(xiàn)列表項(xiàng)目是豎排的列表項(xiàng)目是豎排的，將，即列表項(xiàng)目向左對(duì)齊就能使其從左到右橫向排列 #main-nav li float: left; 為了使列表項(xiàng)目的尺寸和容納它的層保持一致，并利用浮動(dòng)屬性使列表項(xiàng)目的文本隱藏，寫入： #main-nav li a display: block;height: 0px !important;height /*/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0;overflow: hidden;background-repeat: no-repeat; 59 接著，要實(shí)現(xiàn)當(dāng)光標(biāo)懸停光標(biāo)懸停于列表項(xiàng)目上時(shí)，顯示背景圖片的中部，因此需要將背景圖片向上移動(dòng)50px，寫入： #main-nav li a:hover background-position: 0 -50px; / a:hover鼠標(biāo)經(jīng)過時(shí)發(fā)生變化鼠標(biāo)經(jīng)過時(shí)發(fā)生變化給各個(gè)列表項(xiàng)目設(shè)置寬度和背景圖片的路徑： #main-nav li#about,#main-nav li#about a width: