開始此節(jié)的學習前，請確認你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了DIV+CSS到index.htm和css.css文件中，這一節(jié)我將告訴大家如何用列表來制作菜單。
Div+CSS布局入門教程之使用列表制作菜單
開始此節(jié)的學習前，請確認你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了DIV+CSS到index.htm和css.css文件中。
這一節(jié)我將告訴大家如何用列表來制作菜單。
-
-
-
- 首頁 a> li>
- li>
-
- 博客 a> li>
- li>
-
- 設(shè)計 a> li>
- li>
-
- 相冊 a> li>
- li>
-
- 論壇 a> li>
- li>
-
- 關(guān)于 a> li>
- ul>
- div>
以上是這部分的結(jié)構(gòu)，有關(guān)于這兩個HTML元素大家自己去參考相關(guān)的內(nèi)容吧，它們最主要的作用就是在HTML中以列表的形式來顯示一些信息。
還有一點需要大家一定要分清楚的，當在HTML中定義為id="divID"時，在CSS對應(yīng)的設(shè)置語法則是#divID{} ，如果在HTML中定義為class="divID"時，則在CSS中對應(yīng)的設(shè)置語法是.divID。
如果id="divID"這個層中包括了一個，則這個img在DIV+CSS中對應(yīng)的設(shè)置語法應(yīng)該是#divID img {}，同樣，如果是包含在class="divID"這個層中時，則設(shè)置語法應(yīng)該是.divID img {}，這一點希望大家要分清楚了。
◆另外，HTML中的一切元素都是可以定義的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中設(shè)置它們，則直接寫入元素的名稱加上一對大括號{}就可以了。所有的DIV+CSS代碼都應(yīng)該寫在大括號{}中。
按照上面的介紹，我們先在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的縮進，這樣做可以使所有的列表內(nèi)容都不縮進。
#menu ul li {float:left;}
這里的 float:left 的左右是讓內(nèi)容都在同一行顯示，因此使用了浮動屬性(float)。
到這一步，建議大家先保存預(yù)覽一下效果，我們再添加下面的內(nèi)容，效果如下：
這時，列表內(nèi)容是排列在一行，我們在#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)生一個20像素的距離(左：10px，右：10px)，預(yù)覽的效果如下：
◆現(xiàn)在，雛形已經(jīng)出來了，我們再來固定菜單的位置，把代碼改成如下：
- #menu {padding:20px 20px 0 0}
- /*利用padding:20px 20px 0 0來固定菜單位置*/
- #menu ul {float:right;list-style:none;margin:0px;}
- /*添加了float:right使得菜單位于頁面右側(cè)*/
- #menu ul li {float:left;margin:0 10px}
這時，位置已經(jīng)確定了，可是構(gòu)思圖中，菜單選項之間還有一條豎線，怎么辦呢？
別忘了，我們早就已經(jīng)留好了一個空的，要想加入豎線就使用它了。
按照上面說的方法，我們再添加以下代碼：
- .menuDiv {width:1px;height:28px;background:#999}
保存預(yù)覽一下，豎線是否已經(jīng)出來了？關(guān)于這段代碼就不多講了，應(yīng)該是很容易理解的。
不過，菜單選項的文字卻在頂部，我們再修改成以下代碼：
- #menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
關(guān)于display:block;line-height:28px大家可以去參閱一下手冊，我就不多講了。
◆效果基本上已經(jīng)實現(xiàn)了，剩下的就是修改菜單的超鏈接樣式，在css.css中添加以下代碼：
- #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
- #menu ul li a:hover{}
這個也不多說了，沒什么好說的了，***的效果如下：
這一節(jié)到這里就完畢了。
【編輯推薦】
- 新手上路 如何學習DIV+CSS制作網(wǎng)頁
- Div+CSS布局入門教程之頁面布局和規(guī)劃
- 深入學習DIV+CSS之絕對定位和相對定位用法
- Div+CSS布局入門之寫入整體層結(jié)構(gòu)與CSS
- DIV+CSS開發(fā)過程中影響SEO的制作細節(jié)
網(wǎng)頁題目：Div+CSS布局入門教程之使用列表制作表單
分享URL：
http://uogjgqi.cn/article/djjdehs.html
