那个大神帮我弄一下这布局的代码
div吧
全部回复
仅看楼主
level 1
光怪▫ 楼主
2013年01月14日 14点01分 1
level 6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>布局</title>
<style type="text/css">
.clear{clear:both;}
#head{
width:960px;
margin:0 auto;
height:100px;
border:1px solid #ccc;
}
#menu{
width:960px;
margin:0 auto;
height:40px;
border:1px solid #ccc;
padding:0;
}
#main{
width:960px;
margin:0 auto;
height:500px;
border:1px solid #ccc;
}
.main_left{
width:350px;
float:left;
height:500px;
border:1px solid #ccc;
}
.main_right{
width:600px;
float:right;
height:500px;
border:1px solid #ccc;
}
.right_center{
width:400px;
float:left;
height:500px;
border:1px solid #ccc;
}
.right_content{
width:180px;
float:right;
height:500px;
border:1px solid #ccc;
}
#foot{
width:960px;
margin:0 auto;
height:80px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="head"></div>
<div class="clear"></div>
<ul id="menu"></ul>
<div class="clear"></div>
<div id="main">
<div class="main_left"></div>
<div class="main_right">
<div class="right_center"></div>
<div class="right_content"></div>
</div>
</div>
<div class="clear"></div>
<div id="foot"></div>
</body>
</html>
2013年01月17日 05点01分 2
level 8
<!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>网页布局</title>
<style type="text/css">
*{margin:0px; padding:0px;}
#header{width:500px; height:60px; background:#666; margin:0 auto;}
#nav{width:500px; height:20px; background:#069;margin:0 auto;}
#content{width:500px; height:238px;margin:0 auto;}
#content .l{ float:left;width:106px; height:238px; background:#666;}
#content .c{ float:left;width:291px; height:238px; background:#999;}
#content .r{ float:left;width:103px; height:238px; background:#666;}
#friendLink{width:500px; height:20px; background:#999;margin:0 auto;}
#footer{width:500px; height:38px; background:#666;margin:0 auto;}
</style>
</head>
<body>
<div id="header">顶部</div>
<div id="nav">导航条</div>
<div id="content">
<div class="l">左</div>
<div class="c">中</div>
<div class="r">右</div>
</div>
<div id="friendLink">友情链接</div>
<div id="footer">底部</div>
</body>
</html>
复制代码就可看到如上图中的效果。
2013年01月17日 13点01分 3
1