[01]DIV+CSS布局回顧

1、第1講：DIV+CSS布局回顧o設(shè)計(jì)第一步就是構(gòu)思，一般來(lái)說(shuō)需要用PhotoShop或FireWorks(以下簡(jiǎn)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái)。o根據(jù)構(gòu)思圖規(guī)劃頁(yè)面布局，仔細(xì)分析，圖片大致分為以下幾個(gè)部分：o1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖:o根據(jù)上圖，給出一個(gè)實(shí)際的頁(yè)面布局圖，說(shuō)明一下層的嵌套關(guān)系，這樣理解起來(lái)就會(huì)更簡(jiǎn)單了。oDIV結(jié)構(gòu)如下：body /*這是一個(gè)HTML元素*/#Container /

2、*頁(yè)面層容器*/#Header /*頁(yè)面頭部*/#PageBody /*頁(yè)面主體*/#Sidebar /*側(cè)邊欄*/#MainBody /*主體內(nèi)容*/#Footer /*頁(yè)面底部*/o至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，接下來(lái)要做的就是書寫HTML代碼和CSSo接下來(lái)我們新建一個(gè)文件夾(網(wǎng)站工作目錄），命名為“DIV+CSS布局練習(xí)”，用Dreamweaver在文件夾下新建文檔，其內(nèi)容分別為：o 無(wú)標(biāo)題文檔 o o這是XHTML的基本結(jié)構(gòu)，將其命名為index.htm，另一個(gè)文檔則命名為css.css。o下面，在標(biāo)簽對(duì)中寫入DIV的基本結(jié)構(gòu)，代碼如下：o o以01示例做為演示o為了使以后閱讀代碼更

3、簡(jiǎn)易，我們應(yīng)該添加相關(guān)注釋，接下來(lái)打開(kāi)css.css文件，寫入CSS信息，代碼如下：o/*基本信息*/body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;o/*頁(yè)面層容器*/#container width:100%o/*頁(yè)面頭部*/#Header width:800px;margin:0 auto;height:100px;background:#FFCC99o/*頁(yè)面主體*/#PageBody width:800px;margin:0 auto;height:400px;background:#CCFF00o

4、/*頁(yè)面底部*/#Footer width:800px;margin:0 auto;height:50px;background:#00FFFFofont:12px Tahoma；這里使用了縮寫，完整的代碼應(yīng)該是：font-size:12px;font-family:Tahoma；說(shuō)明字體為12像素大小，字體為Tahoma格式；omargin:0px；也使用了縮寫，完整的應(yīng)該是：omargin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0pxo順序是 上 / 右 / 下 / 左，你

5、也可以書寫為margin:0(縮寫)；以上樣式說(shuō)明body部分對(duì)上右下左邊距為0像素，如果使用auto則是自動(dòng)調(diào)整邊距，o另外還有以下幾種寫法：margin:0px auto；說(shuō)明上下邊距為0px，左右為自動(dòng)調(diào)整；padding屬性和margin有許多相似之處，他們的參數(shù)是一樣的，只不過(guò)各自表示的含義不相同，margin是外部距離，而padding則是內(nèi)部距離。otext-align:center文字對(duì)齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對(duì)齊。obackground:#FFF設(shè)置背景色為白色，這里顏色使用了縮寫，完整的應(yīng)該是background:#FFFFFF。backgroun

6、d可以用來(lái)給指定的層填充背景色、背景圖片，以后我們將用到如下格式：obackground:#ccc url(bg.gif) top left no-repeat；表示：使用#CCC(灰度色)填充整個(gè)層，使用bg.gif做為背景圖片，top left表示圖片位于當(dāng)前層的左上端，no-repeat表示僅顯示圖片大小而不填充滿整個(gè)層。top/right/left/bottom/center用于定位背景圖片，分別表示 上 / 右 /左 /下/ 中；還可以使用obackground:url(bg.gif) 20px 100px;表示X座標(biāo)為20像素，Y座標(biāo)為100像素的精確定位；repeat/no-re

7、peat/repeat-x/repeat-y分別表示 填充滿整個(gè)層 / 不填充 / 沿X軸填充 / 沿Y軸填充。oheight / width / color 分別表示高度(px)、寬度(px)、字體顏色(HTML色系表)。o4、如何使頁(yè)面居中？o代碼保存后可以看到，整個(gè)頁(yè)面是居中顯示的，那么究竟是什么原因使得頁(yè)面居中顯示呢？是因?yàn)槲覀冊(cè)?container中使用了以下屬性：margin:0 auto;按照前面的說(shuō)明，可以知道，表示上下邊距為0，左右為自動(dòng)，因此該層就會(huì)自動(dòng)居中了。如果要讓頁(yè)面居左，則取消掉auto值就可以了，因?yàn)槟J(rèn)就是居左顯示的。通過(guò)margin:auto我們就可以輕易地使

8、層自動(dòng)居中了。o在前面寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把css.css中的樣式全部清除掉，重新寫入以下樣式代碼：o/*基本信息*/body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;a:link,a:visited font-size:12px;text-decoration:none;a:hovero/*頁(yè)面層容器*/#container width:800px;margin:10px autoo#container width:800px;margin:10px autoo指定整個(gè)頁(yè)面的顯

9、示區(qū)域。width:800px指定寬度為800像素，這里根據(jù)實(shí)際所需設(shè)定。margin:10px auto，則是頁(yè)面上、下邊距為10個(gè)像素，并且居中顯示。o將TOP部分切片為兩部分，第一部分包括了LOGO和一條橫線。由于LOGO圖片并沒(méi)有太多的顏色，這里我于是將這一部分保存為GIF格式，調(diào)色板選擇為精確，選擇Alpha透明度，色版為白色(此處顏色應(yīng)與背景色相同)，導(dǎo)出為logo.gif，圖像寬度為800px。o到這里，有的朋友就說(shuō)了，* 為什么要使用為什么要使用GIF格式？使用格式？使用JPEG不是更好嗎？不是更好嗎？因?yàn)镚IF格式的圖片文件更小，這樣能使頁(yè)面載入的速度更快，當(dāng)然使用此格式之前

10、必須確定圖片并沒(méi)有使用太多的顏色，當(dāng)我們使用了GIF格式時(shí)，從肉眼上并不能看出圖片有什么太大的變化，因此這是可行的。o* 接下來(lái)的接下來(lái)的Banner部分還能使用部分還能使用GIF格式格式嗎？嗎？答案是不能，因?yàn)锽anner部分是一個(gè)細(xì)致的圖片，如果使用GIF格式顏色會(huì)有太大的損失，所以必須使用JPEG格式，將文件導(dǎo)出為banner.jpg。o* 合理的切片是非常之重要的，因?yàn)榍衅暮侠淼那衅欠浅Ｖ匾?，因?yàn)榍衅姆椒ㄕ_與否決定了方法正確與否決定了CSS書寫的簡(jiǎn)易程度以書寫的簡(jiǎn)易程度以及頁(yè)面載入速度。及頁(yè)面載入速度。o切好片后，我們還需要對(duì)TOP部分進(jìn)行分析并將DIV結(jié)構(gòu)寫入Header

11、中代碼如下：o首頁(yè)博客設(shè)計(jì)相冊(cè)論壇關(guān)于o為什么要這么寫呢，因?yàn)閷?duì)菜單使用列表形式，可以在以后方便對(duì)菜單定制樣式。o而為什么要添加以下代碼呢？插入這一段代碼是可以方便地對(duì)菜單選項(xiàng)之間插入一些分隔樣式，例如預(yù)覽圖中的豎線分隔。o然后我們?cè)赾ss.css中再寫入以下樣式：o/*頁(yè)面頭部*/#header background:url(logo.gif) no-repeato而為什么要添加以下代碼呢？插入這一段代碼是可以方便地對(duì)菜單選項(xiàng)之間插入一些分隔樣式，例如預(yù)覽圖中的豎線分隔。o然后我們?cè)赾ss.css中再寫入以下樣式：o/*頁(yè)面頭部*/#header background:url(logo.gi

12、f) no-repeato樣式說(shuō)明：樣式說(shuō)明：#header background:url(logo.gif) no-repeat給頁(yè)面頭部分加入一個(gè)背景圖片LOGO，并且不作填充。o這里，我們沒(méi)有指定這里，我們沒(méi)有指定header層的高度，為什么不層的高度，為什么不指定呢？指定呢？ 因?yàn)閔eader層中還有菜單和banner項(xiàng)，所以層的高度暫時(shí)是未知的，而層的屬性又可以讓層根據(jù)內(nèi)容自動(dòng)設(shè)定調(diào)整，因此我們并不需要指定高度。o頁(yè)面頂部制作頁(yè)面頂部制作-使用列表使用列表制作菜單制作菜單 o用列表來(lái)制作菜單。 首頁(yè) 博客 設(shè)計(jì) 相冊(cè) 論壇 關(guān)于 注意：自定義樣式menuDiv用于加入菜單分割線o需要

13、注意的是，當(dāng)在HTML中定義為id=“divID”時(shí)，在CSS對(duì)應(yīng)的設(shè)置語(yǔ)法則是#divID ，如果在HTML中定義為class=“divID”時(shí)，則在CSS中對(duì)應(yīng)的設(shè)置語(yǔ)法是.divID。o另外，HTML中的一切元素都是可以定義的，例如table、tr、td、th、form、img、input.等等，如果你要在CSS中設(shè)置它們，則直接寫入元素的名稱加上一對(duì)大括號(hào)就可以了。所有的CSS代碼都應(yīng)該寫在大括號(hào)中。o按照上面的介紹，在按照上面的介紹，在css.css中寫入以下代碼：中寫入以下代碼： #menu ul list-style:none;margin:0px;#menu ul li flo

14、at:left;解釋一下：解釋一下：o#menu ul list-style:none;margin:0px;list-style:none，這一句是取消列表前點(diǎn)，因?yàn)槲覀儾恍枰?，這一句是取消列表前點(diǎn)，因?yàn)槲覀儾恍枰@些點(diǎn)。這些點(diǎn)。margin:0px，這一句是刪除，這一句是刪除UL的縮進(jìn)，這樣做可以使所有的的縮進(jìn)，這樣做可以使所有的列表內(nèi)容都不縮進(jìn)。列表內(nèi)容都不縮進(jìn)。o#menu ul li float:left;這里的這里的 float:left 的左右是讓內(nèi)容都在同一行顯示，因此使用的左右是讓內(nèi)容都在同一行顯示，因此使用了浮動(dòng)屬性了浮動(dòng)屬性(float)。效果圖：o在在css.css中修

15、正寫入以下代碼：中修正寫入以下代碼： #menu ul list-style:none;margin:0px;#menu ul li float:left;margin:0 10px這里，這里，margin:0 10px的作用就是讓列表內(nèi)容之間產(chǎn)生一個(gè)的作用就是讓列表內(nèi)容之間產(chǎn)生一個(gè)20像素的距離像素的距離(左：左：10px，右：，右：10px)，預(yù)覽的效果如下：，預(yù)覽的效果如下：o在在css.css中繼續(xù)修正加入以下代碼：中繼續(xù)修正加入以下代碼： /*利用利用padding:20px 20px 0 0來(lái)固定菜單位置來(lái)固定菜單位置*/#menu padding:20px 20px 0 0/*添

16、加了添加了float:right使得菜單位于頁(yè)面右側(cè)使得菜單位于頁(yè)面右側(cè)*/#menu ul float:right;list-style:none;margin:0px;#menu ul li float:left;margin:0 10px/*菜單選項(xiàng)之間加一條豎線菜單選項(xiàng)之間加一條豎線*/.menuDiv width:1px;height:28px;background:#999效果圖：文字偏上？o在在css.css中繼續(xù)修正加入以下代碼：中繼續(xù)修正加入以下代碼： /*菜單文字上下居中菜單文字上下居中*/#menu ul li float:left;margin:0 10px;displ

17、ay:block;line-height:28px /*菜單的超鏈接樣式菜單的超鏈接樣式 */#menu ul li a:link,#menu ul li a:visited font-weight:bold;color:#666#menu ul li a:hover效果圖：oHead的banner制作制作-用好用好border和和clearo程序代碼以上代碼便可以實(shí)現(xiàn)設(shè)計(jì)草圖中的banner，在css.css中寫入以下代碼：#banner background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/ width:730px; /*設(shè)定層的寬度

18、*/ margin:auto; /*層居中*/ height:240px; /*設(shè)定高度*/ border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實(shí)線*/ clear:both /*清除浮動(dòng)*/ 至此，頭部菜單部分設(shè)計(jì)完成！opagebody制作制作#pagebody width:730px; /*設(shè)定寬度*/ margin:8px auto; /*居中*/#sidebar width:160px; /*設(shè)定寬度*/ text-align:left; /*文字左對(duì)齊*/ float:left; /*浮動(dòng)居左*/ clear:left; /*不允許左側(cè)存在浮動(dòng)*/ overflow:hi