华南俳烁实业有限公司

　　這里我只介紹這些常用的 CSS 屬性了，其他的請參看 CSS2.0 中文手冊。 當(dāng)我們寫好了頁面大致的 DIV 結(jié)構(gòu)后，我們就可以開始細致地對每一個部分進行制作了。

　　在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把 css.css 中的樣式全部清除掉，重新寫入以下樣式代碼：

　　/*基本信息*/

　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

　　a:link,a:visited {font-size:12px;text-decoration:none;}

　　a:hover{}

　　/*頁面層容器*/

　　#container {w idth:800px;margin:10px auto}

　　樣式說明：

　　a:link,a:visited {font-size:12px;text-decoration:none;}

　　a:hover {}

　　這兩項分別是控制頁面中超鏈接的樣式，具體我就不說明了，請大家參閱手冊。

　　第 43 頁

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　#container {width:800px;margin:10px auto}

　　指定整個頁面的顯示區(qū)域。

　　width:800px 指定寬度為 800 像素，這里根據(jù)實際所需設(shè)定。

　　margin:10px auto，則是頁面上、下邊距為 10 個像素，并且居中顯示。 上一章中我們講過，對層的 margin 屬性的左右邊距設(shè)置為 auto 可以讓層居中顯示。

　　接下來，我們開始制作 TOP 部分，TOP 部分包括了 LOGO、菜單和 Banne r，首先我們要做的就是對設(shè)計好的圖片進行切片，以下是在 FW 下完成的切片：

　　我將 TOP 部分切片為兩部分，第一部分包括了 LOGO 和一條橫線。由于 LOGO 圖片并沒有太多的顏 色，這里我于是將這一部分保存為 GIF 格式，調(diào)色板選擇為精確，選擇 Alpha 透明度，色版為白色(此 處顏色應(yīng)與背景色相同)，導(dǎo)出為 logo.gif，圖像寬度為 800px。

　　到這里，有的朋友就說了，* 為什么要使用 GIF 格式?使用 JPEG 不是更好嗎?

　　因為 GIF 格式的圖片文件更小，這樣能使頁面載入的速度更快，當(dāng)然使用此格式之前必須確定圖片并 沒有使用太多的顏色，當(dāng)我們使用了 GIF 格式時，從肉眼上并不能看出圖片有什么太大的變化，因此這是可行的。

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　* 接下來的 Banne r 部分還能使用 GIF 格式嗎?

　　答案是不能，因為 Banner 部分是一個細致的圖片，如果使用 GIF 格式顏色會有太大的損失，所以必須 使用 JPEG 格式，將文件導(dǎo)出為 banner.jpg。

　　* 合理的切片是非常之重要的，因為切片的方法正確與否決定了 CSS 書寫的簡易程度以及頁面載入速 度。

　　切好片后，我們還需要對 TOP 部分進行分析并將 DIV 結(jié)構(gòu)寫入 Header 中代碼如下：《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　為什么要這么寫呢，因為對菜單使用列表

　　/*頁面頭部*/

　　#header {background:url(logo.gif) no-repeat}

　　樣式說明：

　　#header {background:url(logo.gif) no -repeat}

　　給頁面頭部分加入一個背景圖片 LOGO，并且不作填充。這里，我們沒有指定 he ade r 層的高度，為什么不指定呢?

　　因為 header 層中還有菜單和 banner 項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據(jù)內(nèi)容 自動設(shè)定調(diào)整，因此我們并不需要指定高度。

　　使用列表

　　制作菜單

　　開始此節(jié)的學(xué)習(xí)前，請確認你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了 DIV、CSS 到 index.htm 和 css.css 文件中。這一節(jié)我將告訴大家如何用列表來制作菜單。

　　它們最主要的作用就是在 HTML 中以列表的形式來顯示一些信息。

　　還有一點需要大家一定要分清楚的，當(dāng)在 HTML 中定義為 id="divID"時，在 CSS 對應(yīng)的設(shè)置語法則是

　　#divID{} ，如果在 HTML 中定義為 class="divID"時，則在 CSS 中對應(yīng)的設(shè)置語法是.divID。

　　如果 id="divID"這個層中包括了，則這個 img 在 CSS 中對應(yīng)的設(shè)置語法應(yīng)該是#divID

　　img {}，同樣，如果是包含在 class="divID"這個層中時，則設(shè)置語法應(yīng)該是.divID img {}，這一點希望大家要分清楚了。

　　另外，HTML 中的一切元素都是可以定義的，例如 table、tr、td、th、form、img、input...等等，如果你 要在 CSS 中設(shè)置它們，則直接寫入元素的名稱加上一對大括號{}就可以了。所有的 CSS 代碼都應(yīng)該寫 在大括號{}中。

　　按照上面的介紹，我們先在 css.css 中寫入以下代碼：

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　#menu ul {list-style:none;margin:0px;}

　　#menu ul li {float:left;}

　　解釋一下：

　　#menu ul {list-style:none;margin:0px;}

　　list-style :none，這一句是取消列表前點，因為我們不需要這些點。

　　margin:0px，這一句是刪除 UL 的縮進，這樣做可以使所有的列表內(nèi)容都不縮進。

　　#menu ul li {float:left;}

　　這里的 float:left 的左右是讓內(nèi)容都在同一行顯示，因此使用了浮動屬性(float)。 到這一步，建議大家先保存預(yù)覽一下效果，我們再添加下面的內(nèi)容，效果如下：

　　這時，列表內(nèi)容是排列在一行，我們在#menu ul li {}再加入代碼 margin:0 10px

　　#menu ul {list-style:none;margin:0px;}

　　#menu ul li {float:left;margin:0 10px}

　　margin:0 10px 的作用就是讓列表內(nèi)容之間產(chǎn)生一個 20 像素的距離(左：10px，右：10px)，預(yù)覽的效果

　　如下：

　　現(xiàn)在，雛形已經(jīng)出來了，我們再來固定菜單的位置，把代碼改成如下：

　　#menu {padding:20px 20px 0 0}

　　/*利用 padding:20px 20px 0 0 來固定菜單位置*/

　　#menu ul {float:right;list-style:none;margin:0px;}

　　《Div + CSS 布局大全》 博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　/*添加了 float:right 使得菜單位于頁面右側(cè)*/

　　#menu ul li {float:left;margin:0 10px}

　　這時，位置已經(jīng)確定了，可是構(gòu)思圖中，菜單選項之間還有一條豎線，怎么辦呢?

　　別忘了，我們早就已經(jīng)留好了一個空的

　　.menuDiv {w idth:1px;height:28px;background:#999}

　　保存預(yù)覽一下，豎線是否已經(jīng)出來了?關(guān)于這段代碼就不多講了，應(yīng)該是很容易理解的。

　　不過，菜單選項的文字卻在頂部，我們再修改成以下代碼：

　　#menu ul li {float:left;margin:0 10px;display:block;line -height:28px}