萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS使用ul進行網頁的多列布局

CSS使用ul進行網頁的多列布局

   幾天在用CSS寫三列布局的時候突然想到的這樣一個方法,這個想法自己都覺得有些瘋狂,如果其中有什麼不對的地方請各位不吝指教。

  當需要寫一個三列布局的時候,一般情況下我會選擇使用如下的DIV布局方式:

CSS使用ul進行網頁的多列布局 三聯

  使用這樣的嵌套方式無疑可以使代碼出錯的概率減少很多,但同時這樣的布局也略顯復雜,對於後期的維護也略顯不便。我們在布局導航時經常會使用到一個方法,那就是使用〈ul〉列表來進行布局,而導航可以形容為多列式的布局,既然如此,那麼我們也就可以使用〈ul〉來進行頁面的多列布局。

 

 


 

 

  這是一個固定寬度的布局,也就是說流動性不強,流動性的布局目前還沒有試驗過,等有時間了再試驗一下,下面貼上這個布局的代碼:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”        “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
   <html xmlns=”http://www.w3.org/1999/xhtml”>
   <head>
   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
   <title>使用UL進行多列布局</title>
   <style type=”text/css”>
   * {margin:0; padding:0;}
   body {
   width:100%;
   height:100%;
  background:#ddedfb;
  }
  #mainContent {
   width:600px;
  margin:10px auto;
  }
  #header,#footer {
  background:#8AC7FA;
  height:80px;
  clear:both;
  }
  #footer {
  clear:both;
  padding-top:10px;
  }
  #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:280px;
   margin:0 10px;
   }
   #content ul li#li2 ul li {
   width:270px;
   height:140px;
   margin:5px;
   background:#0581F0;
   }
   </style>
   </head>

<body>
   <div id=”mainContent”>
   <div id=”header”>這是頭部</div>
   <div id=”content”>
   <ul>
   <li>這是左邊</li>
   <li id=”li2″>
   <ul>
   <li>這是中間的上部</li>
   <li>這是中間的下部</li>
   </ul>
   </li>
   <li>這是右邊</li>
   </ul>
   </div>
   <div id=”footer”>這是底部</div>
   </div>
   </body>
   </html>

這段代碼在IE7及FF3下都能正常顯示,其他浏覽器未做測試,如果你有更好的方法不妨提出來。        

:更多精彩文章請關注三聯網頁設計教程欄目。

copyright © 萬盛學電腦網 all rights reserved