三、頁面頂部制作(2)—-使用列表li制作菜單
開始此節(jié)的學(xué)習(xí)前，請(qǐng)確認(rèn)你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了DIV、CSS到index.htm和css.css文件中。
這一節(jié)我將告訴大家如何用列表li來制作菜單。
程序代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="menu"> <ul> <li><a href="http://www.jssanhong.com/#">首頁</a></li> <li class="menuDiv"></li> <li><a href="http://www.jssanhong.com/#">博客</a></li> <li class="menuDiv"></li> <li><a href="http://www.jssanhong.com/#">設(shè)計(jì)</a></li> <li class="menuDiv"></li> <li><a href="http://www.jssanhong.com/#">相冊(cè)</a></li> <li class="menuDiv"></li> <li><a href="http://www.jssanhong.com/#">論壇</a></li> <li class="menuDiv"></li> <li><a href="http://www.jssanhong.com/#">關(guān)于</a></li> </ul> </div> |
以上是這部分的結(jié)構(gòu)，有關(guān)于
1 2 | <ul></ul> <li></li> |
這兩個(gè)HTML元素大家自己去參考相關(guān)的內(nèi)容吧，它們最主要的作用就是在HTML中以列表的形式來顯示一些信息。
還有一點(diǎn)需要大家一定要分清楚的，當(dāng)在HTML中定義為id=”divID”時(shí)，在CSS對(duì)應(yīng)的設(shè)置語法則是#divID{}，如果在HTML中定義為class=”divID”時(shí)，則在CSS中對(duì)應(yīng)的設(shè)置語法是.divID。
如果id=”divID”這個(gè)層中包括了一個(gè)
1 | <img></img> |
，則這個(gè)img在CSS中對(duì)應(yīng)的設(shè)置語法應(yīng)該是#divID img {}，同樣，如果是包含在class=”divID”這個(gè)層中時(shí)，則設(shè)置語法應(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中寫入以下代碼：
程序代碼
1 2 | #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} |
解釋一下：
1 | #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)。
1 | #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：
程序代碼
1 2 | #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)出來了，我們?cè)賮砉潭ú藛蔚奈恢茫汛a改成如下：
程序代碼
1 2 3 4 5 | #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} |
這時(shí)，位置已經(jīng)確定了，可是構(gòu)思圖中，菜單選項(xiàng)之間還有一條豎線，怎么辦呢？別忘了，我們?cè)缇鸵呀?jīng)留好了一個(gè)空的
1 | <li class="menuDiv"></li> |
要想加入豎線就使用它了。
按照上面說的方法，我們?cè)偬砑右韵麓a：
程序代碼
1 | .menuDiv {width:1px;height:28px;background:#999} |
保存預(yù)覽一下，豎線是否已經(jīng)出來了？關(guān)于這段代碼就不多講了，應(yīng)該是很容易理解的。
不過，菜單選項(xiàng)的文字卻在頂部，我們?cè)傩薷某梢韵麓a：
程序代碼
1 | #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} |
關(guān)于display:block;line-height:28px大家可以去參閱一下手冊(cè)，我就不多講了。
效果基本上已經(jīng)實(shí)現(xiàn)了，剩下的就是修改菜單的超鏈接樣式，在css.css中添加以下代碼：
程序代碼
1 2 | #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} |
這個(gè)也不多說了，沒什么好說的了，最后的效果如下：
這一節(jié)到這里就完畢了，順便把素材提供給大家：
構(gòu)思圖： http://www.tblog.com.cn/attachments/month_0603/s2006327203921.rar
HTML和CSS源文件： http://www.tblog.com.cn/attachments/month_0603/k2006327204039.rar