本篇內(nèi)容介紹了“Div和CSS如何使用列表制作表單”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計,崇川網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:崇川等地區(qū)。崇川做網(wǎng)站價格咨詢:18980820575

Div+CSS布局入門教程之使用列表制作菜單

開始此節(jié)的學(xué)習(xí)前，請確認(rèn)你已經(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中以列表的形式來顯示一些信息。

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

如果id="divID"這個層中包括了一個

這時，列表內(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{}

這個也不多說了，沒什么好說的了，***的效果如下：

“Div和CSS如何使用列表制作表單”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！