當我們寫好了頁面大致的div結構後，我們就可以開始細緻地對每乙個部分進行製作了。
樣式說明：
a:link,a:visited
a:hover {}
#container
指定整個頁面的顯示區域。
width:800px指定寬度為800畫素，這裡根據實際所需設定。
margin:10px auto，則是頁面上、下邊距為10個畫素，並且居中顯示。
上一章中我們講過，對層的margin屬性的左右邊距設定為auto可以讓層居中顯示。
我將top部分切片為兩部分，第一部分包括了logo和一條橫線。由於logo並沒有太多的顏色，這裡我於是將這一部分儲存為gif格式，調色盤選擇為精確，選擇alpha透明度，色版為白色(此處顏色應與背景色相同)，匯出為logo.gif，影象寬度為800px。
到這裡，有的朋友就說了，* 為什麼要使用gif格式？使用jpeg不是更好嗎？
因為gif格式的檔案更小，這樣能使頁面載入的速度更快，當然使用此格式之前必須確定並沒有使用太多的顏色，當我們使用了gif格式時，從肉眼上並不能看出有什麼太大的變化，因此這是可行的。
* 接下來的banner部分還能使用gif格式嗎？
答案是不能，因為banner部分是乙個細緻的，如果使用gif格式顏色會有太大的損失，所以必須使用jpeg格式，將檔案匯出為banner.jpg。
* 合理的切片是非常之重要的，因為切片的方法正確與否決定了css書寫的簡易程度以及頁面載入速度。
切好片後，我們還需要對top部分進行分析並將div結構寫入header中**如下：
為什麼要這麼寫呢，因為對選單使用列表形式，可以在以後方便對選單定製樣式。
而為什麼要新增以下**呢？
插入這一段**是可以方便地對選單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。
然後我們在css.css中再寫入以下樣式：
/*頁面頭部*/
#header
樣式說明：
#header
給頁面頭部分加入乙個背景logo，並且不作填充。
這裡，我們沒有指定header層的高度，為什麼不指定呢？
因為header層中還有選單和banner項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據內容自動設定調整，因此我們並不需要指定高度。
/*基本資訊*/
body
a:link,a:visited
a:hover{}
/*頁面層容器*/
#container
Div CSS布局入門教程
一 頁面布局與規劃 在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就...
Div CSS布局入門教程
第 1 頁 頁面布局與規劃 第 2 頁 寫入整體層結構與css 第 3 頁 頁面頂部製作之一 第 4 頁 頁面頂部製作之二 第 5 頁 頁面製作 用好border和clear 網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的...
Div CSS布局入門教程 頁面布局與規劃
在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構思，構思好了，一...