三、頁面頂部製作(2)----使用列表製作選單
開始此節的學習前，請確認你已經參照之前的幾節內容寫入了div、css到index.htm和css.css檔案中。
這一節我將告訴大家如何用列表來製作選單。
程式**
以上是這部分的結構，有關於、這兩個html元素大家自己去參考相關的內容吧，它們最主要的作用就是在html中以列表的形式來顯示一些資訊。
還有一點需要大家一定要分清楚的，當在html中定義為id="divid"時，在css對應的設定語法則是#divid{}，如果在html中定義為class="divid"時，則在css中對應的設定語法是.divid。
如果id="divid"這個層中包括了乙個
，則這個img在css中對應的設定語法應該是#divid img {}，同樣，如果是包含在class="divid"這個層中時，則設定語法應該是.divid img {}，這一點希望大家要分清楚了。
另外，html中的一切元素都是可以定義的，例如table、tr、td、th、form、img、input...等等，如果你要在css中設定它們，則直接寫入元素的名稱加上一對大括號{}就可以了。所有的css**都應該寫在大括號{}中。
按照上面的介紹，我們先在css.css中寫入以下**：
程式**
#menu ul
#menu ul li
解釋一下：
#menu ul
list-style:none，這一句是取消列表前點，因為我們不需要這些點。
margin:0px，這一句是刪除ul的縮排，這樣做可以使所有的列表內容都不縮排。
#menu ul li
這裡的 float:left 的左右是讓內容都在同一行顯示，因此使用了浮動屬性(float)。
到這一步，建議大家先儲存預覽一下效果，我們再新增下面的內容，效果如下：
這時，列表內容是排列在一行，我們在#menu ul li {}再加入**margin:0 10px：
程式**
#menu ul
#menu ul li
margin:0 10px的作用就是讓列表內容之間產生乙個20畫素的距離(左：10px，右：10px)，預覽的效果如下：
現在，雛形已經出來了，我們再來固定選單的位置，把**改成如下：
程式**
#menu
/*利用padding:20px 20px 0 0來固定選單位置*/
#menu ul
/*新增了float:right使得選單位於頁面右側*/
#menu ul li
這時，位置已經確定了，可是構思圖中，選單選項之間還有一條豎線，怎麼辦呢？
別忘了，我們早就已經留好了乙個空的，要想加入豎線就使用它了。
按照上面說的方法，我們再新增以下**：
程式**
.menudiv
，儲存預覽一下，豎線是否已經出來了？關於這段**就不多講了，應該是很容易理解的。
不過，選單選項的文字卻在頂部，我們再修改成以下**：
程式**
#menu ul li
關於display:block;line-height:28px
程式**
#menu ul li a:link,#menu ul li a:visited
#menu ul li a:hover{}
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布局入門教程 三
三 頁面頂部製作 1 當我們寫好了頁面大致的div結構後，我們就可以開始細緻地對每乙個部分進行製作了。程式 基本資訊 body a link,a visited a hover 頁面層容器 container 樣式說明 a link,a visited a hover container 指定整個頁...