分享一个简易网站DIV布局图文
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
text-align:center;
margin:0 auto;
}
#waiceng{
width:902px;
height:auto;
border:1px solid black;
/*background:pink;*/
}
#topbox{
width:900px;
height:150px;
/*background:#ebebeb;*/
}
#middlebox{
width:900px;
height:600px;
/*background:red;*/
}
#footbox{
width:900px;
height:200px;
background:green;
}
.nav{
width:100%;
height:10px;
}
#top_logo{
width:200px;
height:100px;
background:red;
}
#top_right{
width:690px;
height:100px;
background:blue;
}
#nav{
/*background:#ffff00;*/
width:100%;
height:10px;
}
#menu,#lianjie{
width:100%;
height:40px;
background:#8b0000;
}
#top_logo,#menu,#middle_left,#nav,#mi_left{float:left;}
#middle_right,#top_right,#mi_right{float:right;}
#middle_left{
width:200px;
height:600px;
background:#ebebeb;
}
#middle_right{
width:690px;
height:100%;
/*background:pink;*/
}
#ri_top,#ri_middle,#ri_foot{
width:100%;
height:193px;
background:#ebebeb;
}
#mi_left{
width:340px;
height:100%;
background:red;
}
#mi_right{
width:340px;
height:100%;
background:blue;
}
</style>
</head>
<body>
<div id="waiceng"><!--外层的DIV-->
<div id="topbox"><!--头部DIV-->
<div id="top_logo">
左边box
</div>
<div id="top_right">
右边box
</div>
<div id="nav"></div>
<div id="menu">
40PX
</div>
</div>
<div></div>
<div id="middlebox"><!--中间部分的DIV-->
<div id="middle_left">
中间左盒子
</div>
<div id="middle_right"><!--右侧盒子-->
<div id="ri_top"><!--右侧上面的盒子-->
右侧上面的盒子
</div>
<div></div>
<div id="ri_middle"><!--右侧中间的盒子-->
<div id="mi_left"><!--中间第二层左侧中间小盒子-->
中间第二层左侧中间小盒子
</div>
<div id="mi_right"><!--中间第二层右侧中间小盒子-->
中间第二层右侧中间小盒子
</div>
</div>
<div></div>
<div id="ri_foot"><!--右侧下面的盒子-->
<div id="mi_left"><!--中间第二层左侧中间小盒子-->
中间第二层左侧中间小盒子
</div>
<div id="mi_right"><!--中间第二层右侧中间小盒子-->
中间第二层右侧中间小盒子
</div>
</div>
</div>
</div>
<div></div>
<div id="footbox"><!--底部的DIV-->
<div id="lianjie"></div>
</div>
</div>
</body>
</html>
不懂