網頁設計Div+CSS布局入門四

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 網頁設計Div+CSS布局入門四

網頁設計Div+CSS布局入門四

編輯：WEB前端代碼

還有一點需要大家一定要分清楚的，當在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} 保存預覽一下，豎線是否已經出來了？關於這段代碼就不多講了，應該是很容易理解的。

效果圖