Div+CSS布局入門

還有一點(diǎn)需要大家一定要分清楚的，當(dāng)在HTML中定義為id=”divID“時(shí)，在CSS對(duì)應(yīng)的設(shè)置語(yǔ)法則是#divID{} ，如果在HTML中定義為class=”divID”時(shí)，則在CSS中對(duì)應(yīng)的設(shè)置語(yǔ)法是.divID。

如果id=”divID”這個(gè)層中包括了一個(gè)，則這個(gè)img在CSS中對(duì)應(yīng)的設(shè)置語(yǔ)法應(yīng)該是#divID img {}，同樣，如果是包含在class=”divID”這個(gè)層中時(shí)，則設(shè)置語(yǔ)法應(yīng)該是.divID img {}，這一點(diǎn)希望大家要分清楚了。

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

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

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

解釋一下：

#menu ul {list-style:none;margin:0px;}
list-style:none，這一句是取消列表前點(diǎn)，因?yàn)槲覀儾恍枰@些點(diǎn)。
margin:0px，這一句是刪除UL的縮進(jìn)，這樣做可以使所有的列表內(nèi)容都不縮進(jìn)。

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

到這一步，建議大家先保存預(yù)覽一下效果，我們?cè)偬砑酉旅娴膬?nèi)容，效果如下：

這時(shí)，列表內(nèi)容是排列在一行，我們?cè)?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)生一個(gè)20像素的距離(左：10px，右：10px)，預(yù)覽的效果如下：

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

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0來(lái)固定菜單位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜單位于頁(yè)面右側(cè)*/
#menu ul li {float:left;margin:0 10px}

這時(shí)，位置已經(jīng)確定了，可是構(gòu)思圖中，菜單選項(xiàng)之間還有一條豎線，怎么辦呢？
別忘了，我們?cè)缇鸵呀?jīng)留好了一個(gè)空的