案例1-HTML中使用css+div設(shè)計(jì)簡(jiǎn)單網(wǎng)頁(yè)

1、HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(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)航條的制作(較難)；第一步：規(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)站 其基本布局見(jiàn)下圖其基本布局見(jiàn)

2、下圖 規(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 Height

3、: Changes depending on content5. Footer 網(wǎng)站底欄網(wǎng)站底欄，包含版權(quán)信息等。，包含版權(quán)信息等。 Width: 760px Height: 66px。 HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建第二步：創(chuàng)建htmlhtml模板及文件目錄等；模板及文件目錄等；第三步：將網(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ì)；第八步

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

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

6、講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)第三步：將網(wǎng)站分為五個(gè)divdiv，網(wǎng)頁(yè)基本布局的基礎(chǔ)；，網(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)航條的制作(較難)；第三步：將網(wǎng)站分為五個(gè)第三步：將網(wǎng)站分為五個(gè)divdiv，網(wǎng)頁(yè)基本布局的基礎(chǔ)，網(wǎng)頁(yè)基本布局的基礎(chǔ) 1.1.將將“第一步第一步”提到的五個(gè)部分都放入盒子中，在提到的五個(gè)部分都放入盒子中，

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

8、下 HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁(yè)基本布局的基礎(chǔ)；第四步：網(wǎng)頁(yè)布局與第四步：網(wǎng)頁(yè)布局與divdiv浮動(dòng)等；浮動(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)航條的制作(較難)；第四步：網(wǎng)頁(yè)布局與第四步：網(wǎng)頁(yè)布局與divdiv浮動(dòng)等浮動(dòng)等 1.浮動(dòng)，首先讓邊框浮動(dòng)到主要內(nèi)容的右邊。用css控制浮動(dòng)#sid

9、ebar-a float: right;width: 280px;background: darkgreen;表現(xiàn)如下 2. 往主要內(nèi)容的盒子中寫(xiě)入文字。在html文件中寫(xiě)入 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 in nibh rutrum gravida.

10、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 habitasse platea dictumst

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

12、cipit 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 eget, placerat eget, purus.

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

14、解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁(yè)基本布局的基礎(chǔ)；第四步：網(wǎng)頁(yè)布局與div浮動(dòng)等；第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)；第五步：網(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)航條的制作(較難)；第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn) 第五步主要介紹除網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的表現(xiàn)(Layout),包括以下內(nèi)容: 1.主導(dǎo)航條

15、；主導(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.頁(yè)腳信息頁(yè)腳信息,包括版權(quán)包括版權(quán),認(rèn)證認(rèn)證,副導(dǎo)航條副導(dǎo)航條(可選可選)。 加入這些結(jié)構(gòu)時(shí)，為了不破壞原有框架，需要在css文件“body”標(biāo)簽后面加入:.hidden display: none;“.hidden”即加入的類(lèi)(class), 可以使頁(yè)面上任意屬于hidden類(lèi)的元素(element)不顯示-稍后介紹和使用?，F(xiàn)在加入標(biāo)題現(xiàn)在加入標(biāo)題(heading) (heading) 先回到先回到HTMLHTML的代碼，的代碼，到到是常用的是常用的htmlhtml標(biāo)題代碼。比如一般用

16、標(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 刷新一下頁(yè)面，可以看到巨大的標(biāo)題，和標(biāo)題周?chē)目瞻?，因?yàn)樗⑿乱幌马?yè)面，可以看到巨大的標(biāo)題，和標(biāo)題周?chē)目瞻?，因?yàn)闃?biāo)簽的默認(rèn)大小和邊距標(biāo)簽的默認(rèn)大小和邊距(margin)(margin)造成的，先要消除這些空白造成的，先要消除這些空白, ,需要加入：需要加入： h1 margin: 0;padding: 0; 接下來(lái)是導(dǎo)航條 控制導(dǎo)航條表現(xiàn)的控制導(dǎo)航條表現(xiàn)的csscss代碼相對(duì)比較復(fù)

17、雜，在第九步或是第十步代碼相對(duì)比較復(fù)雜，在第九步或是第十步中詳細(xì)介紹?，F(xiàn)在中詳細(xì)介紹。現(xiàn)在htmlhtml文件加入導(dǎo)航代碼文件加入導(dǎo)航代碼: : AboutServicesPortfolioContact Us 目前導(dǎo)航條的表現(xiàn)比較糟糕，以后將介紹其特殊表現(xiàn)，這里首先暫時(shí)隱藏導(dǎo)航條隱藏導(dǎo)航條,加入： AboutServicesPortfolioContact Us 我們跳一步，先到頁(yè)腳： 頁(yè)腳包括頁(yè)腳包括兩部分：左邊的版權(quán)兩部分：左邊的版權(quán), ,認(rèn)證和右邊的副導(dǎo)航條認(rèn)證和右邊的副導(dǎo)航條。先要讓副導(dǎo)航條向右浮動(dòng)，就像之前處理先要讓副導(dǎo)航條向右浮動(dòng)，就像之前處理SidebarSidebar和和Co

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

19、 Us - Terms of TradeCopyright © Enlighten DesignsPowered by Enlighten Hosting andVadmin 3.0 CMS 刷新頁(yè)面，將看到如下所示 最后我們回到內(nèi)容部分：最后我們回到內(nèi)容部分：用表現(xiàn)內(nèi)容標(biāo)題About,Contact us；用表現(xiàn)段落；用斷行。 AboutEnlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of

20、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 6060Fax: (07) 853 6060Email: infoenlighten.co.nzP.O Box: 14159,

21、 Hamilton, New ZealandMore contact information 小技巧：小技巧：刷新頁(yè)面可以看到在刷新頁(yè)面可以看到在ContentContent層中又出現(xiàn)一些空白層中又出現(xiàn)一些空白，這是由于，這是由于標(biāo)簽的默認(rèn)邊距標(biāo)簽的默認(rèn)邊距(margin)(margin)造成的，必須消除空白，當(dāng)又不想把網(wǎng)頁(yè)造成的，必須消除空白，當(dāng)又不想把網(wǎng)頁(yè)中所有的中所有的標(biāo)簽地邊距都設(shè)為標(biāo)簽地邊距都設(shè)為0 0，這就需要使用，這就需要使用csscss的子選擇器的子選擇器(child css selector),(child css selector),在在htmlhtml的文件結(jié)構(gòu)中，我們想

22、控制的的文件結(jié)構(gòu)中，我們想控制的標(biāo)標(biāo)簽簽( (childchild) )是屬于是屬于#content#content層層( (parentparent) )的的, ,因此在因此在csscss文件中寫(xiě)入：文件中寫(xiě)入： #content h2 margin: 0;padding: 0;#content p margin: 0;padding: 0; 瀏覽器可以識(shí)別僅僅是隸屬于瀏覽器可以識(shí)別僅僅是隸屬于contentcontent層的層的標(biāo)簽的標(biāo)簽的marginmargin和和paddingpadding的值為的值為0 0！ HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解

23、第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(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)的基本文本的樣式第六步：頁(yè)面內(nèi)的基本文本的樣式(css)(css)設(shè)置；設(shè)置；第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁(yè)腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；第六步：頁(yè)面內(nèi)的基本文本的樣式第六步：頁(yè)面內(nèi)的基本文本的樣式(css)(css)設(shè)置設(shè)置首先：首先：去掉紅綠等背景，只保留導(dǎo)航條的紅色背景，即刪除去掉紅綠等背景，只保留導(dǎo)航條的紅色背景，即刪除

24、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-familyfont-family內(nèi)的順序決定字體內(nèi)的順序決定字體顯示優(yōu)先級(jí)，顯示優(yōu)先級(jí)， 比方如果所在計(jì)算機(jī)沒(méi)有比方如果所在計(jì)算機(jī)沒(méi)有ArialArial字

25、體，瀏覽器就會(huì)指向字體，瀏覽器就會(huì)指向HelveticaHelvetica字體，依次類(lèi)推；字體，依次類(lèi)推；colorcolor指字體顏色；指字體顏色；backgroundbackground指背景顏色。指背景顏色。 可以看到內(nèi)容內(nèi)容(content)(content)的各塊的各塊(block)(block)之間的間隙太小之間的間隙太小，在css中寫(xiě)入： #content h2 margin: 0;padding: 0;padding-bottom: 15px;#content p margin: 0;padding: 0;padding-bottom: 15px; 然后需要讓contentco

26、ntent層的四周都空出25px的間隙：方案一：可以在#content#content的的csscss文件中加入文件中加入padding: 25pxpadding: 25px； 方案二：需要填充的層中加入padding層，它的功能僅限于顯示間隙： 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. Don

27、ec 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 eget, placerat eget, purus. Suspendisse mattis nunc vestibulum lig

28、ula. In hac habitasse platea dictumst. 同樣的，再往html文件的content層中加入padding層。然后在css中添加: #sidebar-a float: right;width: 280px;#sidebar-a .padding padding: 25px;#content margin-right: 280px;#content .padding padding: 25px; 接下來(lái)設(shè)置行距，接下來(lái)設(shè)置行距，contentcontent和和sidebar-asidebar-a的行距需要加寬的行距需要加寬，但在，但在csscss中是中是沒(méi)有行距

29、沒(méi)有行距(leading)(leading)這種屬性這種屬性(attribute)(attribute)的，但是有行高的，但是有行高(line-height)(line-height)屬屬性，因此往性，因此往csscss中寫(xiě)入：中寫(xiě)入： #sidebar-a float: right;width: 280px;line-height: 18px;#content margin-right: 280px;line-height: 18px; HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步

30、：將網(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)與第七步：網(wǎng)站頭部圖標(biāo)與logologo部分的設(shè)計(jì)；部分的設(shè)計(jì)；第八步：頁(yè)腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；第七步：網(wǎng)站頭部圖標(biāo)與第七步：網(wǎng)站頭部圖標(biāo)與logologo部分的設(shè)計(jì)部分的設(shè)計(jì) 為實(shí)現(xiàn)設(shè)計(jì)時(shí)的網(wǎng)頁(yè)頭部效果，我們需要以下兩幅圖：/images/headers/about.jpg /images/general/logo_enlighten.gif 首先給首先給#header

31、#header層添加背景圖案層添加背景圖案 #header height: 150px;background: #db6d16url(./images/headers/about.jpg); 接著替換掉接著替換掉標(biāo)簽里的標(biāo)簽里的Enlighten Designs Enlighten Designs logo_enlightenlogo_enlighten圖片浮在頭部的左上方，我們需要設(shè)置圖片浮在頭部的左上方，我們需要設(shè)置的屬性值為的屬性值為 h1 margin: 0;padding: 0;float: right;margin-top: 57px;padding-right: 31px; 這樣

32、我們使存在于這樣我們使存在于層的圖片向右浮動(dòng)，并且上邊距層的圖片向右浮動(dòng)，并且上邊距(margin-top)(margin-top)為為57px57px，右間隙，右間隙(padding-right)(padding-right)為為31px31px，如下圖所示，如下圖所示 HTML+CSS+DIVHTML+CSS+DIV建站建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(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è)置；

33、第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)；第八步：頁(yè)腳信息第八步：頁(yè)腳信息( (版權(quán)等版權(quán)等) )的表現(xiàn)設(shè)置；的表現(xiàn)設(shè)置；第九步：導(dǎo)航條的制作(較難)；第八步：頁(yè)腳信息第八步：頁(yè)腳信息( (版權(quán)等版權(quán)等) )的表現(xiàn)設(shè)置的表現(xiàn)設(shè)置 首先需要控制頁(yè)腳的文本顯示： #footer clear: both;height: 66px;font-family: Tahoma, Arial, Helvetica, Sans-serif;font-size: 10px;color: #c9c9c9; 接著設(shè)置存在鏈接存在鏈接的文本的顯示，例如 讓 下劃線(xiàn)消失下劃線(xiàn)消失:#footer a color: #c9

34、c9c9;text-decoration: none; 如果想讓存在鏈接的文本存在鏈接的文本，在鼠標(biāo)懸停鼠標(biāo)懸停在其上方時(shí)變色變色為#db6d16： #footer a:hover color: #db6d16; 如果想給頁(yè)腳加上灰色的上邊框頁(yè)腳加上灰色的上邊框，在footer層的四周設(shè)置一些間隙，并加大文本的行距： #footer clear: both;height: 66px;font-family: Tahoma, Arial, Helvetica, Sans-serif;font-size: 10px;color: #c9c9c9;border-top: 1px solid #efe

35、fef;padding: 13px 25px;line-height: 18px; 邊框線(xiàn)的類(lèi)型有：邊框線(xiàn)的類(lèi)型有：dotted（由點(diǎn)（由點(diǎn)組成的虛線(xiàn)）組成的虛線(xiàn)） solid（實(shí)線(xiàn)）（實(shí)線(xiàn)） 如果想讓副導(dǎo)航層副導(dǎo)航層(#altnav)(#altnav)向右浮動(dòng)向右浮動(dòng)，需要設(shè)置需要設(shè)置#altnav#altnav的寬度的寬度 并且想讓文本向右對(duì)齊：并且想讓文本向右對(duì)齊： #footer #altnav width: 350px;float: right;text-align: right; 得到如下圖所示的頁(yè)腳樣式得到如下圖所示的頁(yè)腳樣式 HTML+CSS+DIVHTML+CSS+DIV建站

36、建站-實(shí)例講解實(shí)例講解第一步：規(guī)劃網(wǎng)站，以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第三步：將網(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)航條的制作第九步：導(dǎo)航條的制作( (較難較難) )；第九步：導(dǎo)航條的制作第九步：導(dǎo)航條的制作( (較難較難) ) 1. 先去掉導(dǎo)航條的紅色背景導(dǎo)航條的紅色背景， 2. 移除html文件中main-nav層的class=hiddencla

37、ss=hidden,使導(dǎo)航條的內(nèi) 容顯示出來(lái)。 3. 將這4幅圖保存于 /images/nav/文件夾中導(dǎo)航條的動(dòng)態(tài)效果如下圖所示導(dǎo)航條的動(dòng)態(tài)效果如下圖所示 在網(wǎng)頁(yè)顯示的只是圖中紅框圖中紅框標(biāo)出的部分，如果把每幅圖分為上，每幅圖分為上，中，下三部分中，下三部分的話(huà)，未發(fā)生未發(fā)生動(dòng)作時(shí)顯示上部，當(dāng)光標(biāo)懸停光標(biāo)懸停時(shí)，顯示的是中部，被選擇被選擇時(shí)則顯示下部。 接下來(lái)進(jìn)入接下來(lái)進(jìn)入csscss代碼部分，先往代碼部分，先往csscss文件中寫(xiě)入文件中寫(xiě)入 /* Main Navigation */#main-nav height: 50px; #main-nav ul margin: 0; paddi

38、ng: 0; 定義了定義了main-navmain-nav層的高度層的高度定義定義main-navmain-nav層中列表的屬性層中列表的屬性 如果想讓如果想讓導(dǎo)航條導(dǎo)航條和左邊有一定的距離，需要設(shè)置和左邊有一定的距離，需要設(shè)置main-navmain-nav層的層的左邊距左邊距(padding-left)(padding-left) ： /* IE5 Mac Hack */ #main-nav padding-left: 11px; /*/ #main-nav padding-left: 11px; overflow: hidden; /* End Hack */ 可以發(fā)現(xiàn)列表項(xiàng)目是豎排的列

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