正确的说法是div+css布局
163.com 天极 等大站都是div+css布局。一个简单的div+css布局:
HTML文件:
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>a</title>
<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="top" class="l"></div>
<div class="c"></div>
<div id="content" class="l">
<div id="left">
<div id="treelist" class="l">
<ul id="ul1">
<li>1111111111111111111</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
<li>2222222222222222222</li>
</ul>
</div>
<div id="tiles">标题</div>
<div id="newslist">
<ul id="ul2">
<li><a href="#">1111111111111111111</a></li>
<li>1111111111111111111</li>
<li>1111111111111111111</li>
<li>1111111111111111111</li>
<li>1111111111111111111</li>
<li>1111111111111111111</li>
<li>1111111111111111111</li>
</ul>
</div>
</div>
<div id="main" class="l">
<div id="indexnews" class="l">新闻列表</div>
</div>
</div>
<div class="c"></div>
<div id="foot" class="l"></div>
</center>
</body>
</html>
CSS文件:
/* CSS Document */
body{
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#top{
width:768px;
background-color: #F3F3F3;
text-align: left;
white-space: pre;
border: 1px dashed #000000;
height:100;
}
#content{
width:770px;
background-color: #F3F3F3;
text-align: left;
border: 1px none #000000;
list-style-type: none;
}
#left{
width: 226px;
float:left;
background-color: #F3F3F3;
text-align: center;
clear: none;
height:inherit;
border: 1px dashed #000000;
}
#main{
width:540px;
float:right;
background-color: #F3F3F3;
border: 1px dashed #000000;
height: 400;
}
#foot{
border: 1px dashed #000000;
background-color: #F3F3F3;
background-repeat: no-repeat;
height: 100px;
width: 768px;
}
body,td,th {
color: #666666;
}
.c{
clear:both;
}
body {
background-repeat: repeat-y;
}
.l{
border: 1px dotted #333333;
}