首頁 > web前端 > html教學 > ul列表標記設計網頁多列版面配置_HTML/Xhtml_網頁製作

ul列表標記設計網頁多列版面配置_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:46:02
原創
1878 人瀏覽過

幾天在用CSS寫三列佈局的時候突然想到的這樣一個方法,這個想法自己都覺得有些瘋狂,如果其中有什麼不對的地方請各位不吝指教。
  當需要寫一個三列佈局的時候,一般情況下我會選擇使用如下的DIV佈局方式:
圖1 DIV佈局
  使用這樣的嵌套方式無疑可以使程式碼出錯的機率減少很多,但同時這樣的佈局也略顯複雜,對於後期的維護也略顯不便。我們在佈局導航時常常會使用到一個方法,那就是使用〈ul〉清單來進行佈局,而導航可以形容為多列式的佈局,既然如此,那麼我們也就可以使用〈ul〉來進行頁面的多列佈局。
圖2 DIV佈局
這是一個固定寬度的佈局,也就是說流動性不強,流動性的佈局目前還沒有試驗過,等有時間了再試驗一下,下面貼上這個佈局的代碼:

ldquo;-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



使用UL進行多列佈局
* {margin:0; padding:0;}
body {width:100%;
height:100%;background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8AC7FA;
height:80p; >clear:both;
    }
    #footer {
  • clear:both;
  • padding-top:10px;
    }
  • #content {
    height:300px;
      #content {
      height:300px;
    • margin:10px auto;
    • }
      #content ul {
    • list-style:none;
    • height:100%;
      }
    #content ul li {
    width :150px;
  • height:100%;
    background:#8AC7FA;
  • float:left;
  • }
    #content ul li#li2 {
width:}
#content ul li#li2 {
width:280px; margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
height:140px;margin:5px;
background:005; }
這是頭部這是中間的上部這是中間的下部這是右邊這是底部 這段程式碼在IE7及FF3下都能正常顯示,其他瀏覽器未做測試,如果你有更好的方法不妨提出來。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板