DIV CSS 佈局教程網

三、頁面頂部制作(1)

　　當我們寫好了頁面大致的DIV結構後，我們就可以開始細致地對每一個部分進行制作了。

　　在上一章中我們寫入了一些樣式，那些樣式是為了預覽結構而寫入的，我們把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 {width:800px;margin:10px auto}
　　樣式說明：

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

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

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

　　指定整個頁面的顯示區域。
　　width:800px指定寬度為800像素，這裡根據實際所需設定。
　　margin:10px auto，則是頁面上、下邊距為10個像素，並且居中顯示。
　　上一章中我們講過，對層的margin屬性的左右邊距設置為auto可以讓層居中顯示。

　　接下來，我們開始制作TOP部分，TOP部分包括了LOGO、菜單和Banner，首先我們要做的就是對設計好的圖片進行切片.

 

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

　　到這裡，有的朋友就說了，* 為什麼要使用GIF格式？使用JPEG不是更好嗎？
　　因為GIF格式的圖片文件更小，這樣能使頁面載入的速度更快，當然使用此格式之前必須確定圖片並沒有使用太多的顏色，當我們使用了GIF格式時，從肉眼上並不能看出圖片有什麼太大的變化，因此這是可行的。

　　* 接下來的Banner部分還能使用GIF格式嗎？
　　答案是不能，因為Banner部分是一個細致的圖片，如果使用GIF格式顏色會有太大的損失，所以必須使用JPEG格式，將文件導出為banner.jpg。

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

　　切好片後，我們還需要對TOP部分進行分析並將DIV結構寫入Header中代碼如下：
<div id="menu">
<ul>
<li><a href="#">首頁</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">設計</a></li>
<li class="menuDiv"></li>
<li><a href="#">相冊</a></li>
<li class="menuDiv"></li>
<li><a href="#">論壇</a></li>
<li class="menuDiv"></li>
<li><a href="#">關於</a></li>
</ul>
</div>
<div id="banner">
</div>

　　為什麼要這麼寫呢，因為對菜單使用列表<li>形式，可以在以後方便對菜單定制樣式。

　　而為什麼要添加以下代碼呢？
　　<li class="menuDiv"></li>
　　插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。

　　然後我們在css.CSS中再寫入以下樣式：
/*頁面頭部*/
#header {background:url(logo.gif) no-repeat}

　　樣式說明：
　　#header {background:url(logo.gif) no-repeat}
　　給頁面頭部分加入一個背景圖片LOGO，並且不作填充。

　　這裡，我們沒有指定header層的高度，為什麼不指定呢？

　　因為header層中還有菜單和banner項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據內容自動設定調整，因此我們並不需要指定高度。

　　* 接下來，我們開始制作菜單，留到下一章，教程中相關文件請到下一章下載！

[NextPage]

 

三、頁面頂部制作(2)----使用列表<li>制作菜單

　　開始此節的學習前，請確認你已經參照之前的幾節內容寫入了DIV、CSS到index.htm和css.CSS文件中。
　　這一節我將告訴大家如何用列表<li>來制作菜單。
<div id="menu">
<ul>
<li><a href="#">首頁</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">設計</a></li>
<li class="menuDiv"></li>
<li><a href="#">相冊</a></li>
<li class="menuDiv"></li>
<li><a href="#">論壇</a></li>
<li class="menuDiv"></li>
<li><a href="#">關於</a></li>
</ul>
</div>

　　以上是這部分的結構，有關於<ul></ul>、<li></li>這兩個HTML元素大家自己去參考相關的內容吧，它們最主要的作用就是在Html中以列表的形式來顯示一些信息。

　　還有一點需要大家一定要分清楚的，當在HTML中定義為id="divID"時，在CSS對應的設置語法則是#divID{} ，如果在Html中定義為class="divID"時，則在CSS中對應的設置語法是.divID。
　 　如果id="divID"這個層中包括了一個<img></img>，則這個img在CSS中對應的設置語法應該是 #divID img {}，同樣，如果是包含在class="divID"這個層中時，則設置語法應該是.divID img {}，這一點希望大家要分清楚了。
　　另外，Html中的一切元素都是可以定義的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中設置它們，則直接寫入元素的名稱加上一對大括號{}就可以了。所有的CSS代碼都應該寫在大括號{}中。

　　按照上面的介紹，我們先在css.CSS中寫入以下代碼：
#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的縮進，這樣做可以使所有的列表內容都不縮進。

　　#menu ul li {float:left;}
　　這裡的 float:left 的左右是讓內容都在同一行顯示，因此使用了浮動屬性(float)。

　　到這一步，建議大家先保存預覽一下效果，我們再添加下面的內容

　　這時，列表內容是排列在一行，我們在#menu ul li {}再加入代碼margin:0 10px：
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

　　margin:0 10px的作用就是讓列表內容之間產生一個20像素的距離(左：10px，右：10px)

 

　　現在，雛形已經出來了，我們再來固定菜單的位置，把代碼改成如下：
#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0來固定菜單位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜單位於頁面右側*/
#menu ul li {float:left;margin:0 10px}

　　這時，位置已經確定了，可是構思圖中，菜單選項之間還有一條豎線，怎麼辦呢？
　　別忘了，我們早就已經留好了一個空的<li class="menuDiv"></li>，要想加入豎線就使用它了。
　　按照上面說的方法，我們再添加以下代碼：
.menuDiv {width:1px;height:28px;background:#999}

　　保存預覽一下，豎線是否已經出來了？關於這段代碼就不多講了，應該是很容易理解的。

 不過，菜單選項的文字卻在頂部，我們再修改成以下代碼：
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

　　關於display:block;line-height:28px大家可以去參閱一下手冊，我就不多講了。

　　效果基本上已經實現了，剩下的就是修改菜單的超鏈接樣式，在css.CSS中添加以下代碼： #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}