萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程:使用ul進行網頁的多列布局
CSS教程:使用ul進行網頁的多列布局
幾天在用CSS寫三列布局的時候突然想到的這樣一個方法，這個想法自己都覺得有些瘋狂，如果其中有什麼不對的地方請各位不吝指教。
當需要寫一個三列布局的時候，一般情況下我會選擇使用如下的DIV布局方式：
使用這樣的嵌套方式無疑可以使代碼出錯的概率減少很多，但同時這樣的布局也略顯復雜，對於後期的維護也略顯不便。我們在布局導航時經常會使用到一個方法，那就是使用<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%;
