=============banner部分=============
=============菜单部分===============
=菜=== =====主=========== ===右====
=单=== =====题=========== ===侧====
=部=== =====部=========== ===部====
=分=== =====分=========== ===分====
===============foot部分=============
求人 要一份这样的 盒子模型代码
希望 每一个部分 用一种颜色填充了 看起来明白
我最近一直在看 w3school 不过越看越迷糊
我想先看到模型的代码 再去作为这个基础 再去学 应该学起来更快
希望有人可以 抽点时间帮我写一个 非常感谢
因为是学习用的 希望给予尽可能简单明了的代码
如果你方便 希望 每一块盒子 都是 分别背景颜色使用与
margin pardding border element
非常感谢！！
代码可直接运行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/dialog.js" language="JavaScript" type="text/javascript"></script>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div,img,a,body,ul,li,span,p{margin:0;padding:0;}
.clear{clear:both;}
.ban{
width:960px;
height:40px;
background-color:red;
border:1px blue solid;
margin:10px 0;
padding:10px 10px;
/*ban的实际高度是height的40+border的2（上下各1px）+padding的20（上下各10px）=62px；宽度同样 */
}
.menu{
width:960px;
height:40px;
background-color:blue;
border:1px red solid;
margin:20px 0;
padding:10px 10px;
}
/*ban与menu之间的上下边距本应是10+20=30，但是因为浏览器的margin的上下边距bug，因而两者之间的值取其中的较大值，因而为20 */
.left{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.main{
width:558px;
height:38px;
background-color:#000;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.right{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 0 10px 10px;
padding:10px 10px;
float:right;
}
/*menu与left，right，main之间的上下边距本应遵从上边的margin原则为20px，但是因为为left，right，main设置了浮动，所以margin的bug不起作用，为40px*/
</style>
</head>
<body>
<div style="margin:0 auto;width:982px;">
<div class="ban"></div>
<div class="menu"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="foot"></div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/dialog.js" language="JavaScript" type="text/javascript"></script>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div,img,a,body,ul,li,span,p{margin:0;padding:0;}
.clear{clear:both;}
.ban{
width:960px;
height:40px;
background-color:red;
border:1px blue solid;
margin:10px 0;
padding:10px 10px;
/*ban的实际高度是height的40+border的2（上下各1px）+padding的20（上下各10px）=62px；宽度同样 */
}
.menu{
width:960px;
height:40px;
background-color:blue;
border:1px red solid;
margin:20px 0;
padding:10px 10px;
}
/*ban与menu之间的上下边距本应是10+20=30，但是因为浏览器的margin的上下边距bug，因而两者之间的值取其中的较大值，因而为20 */
.left{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.main{
width:558px;
height:38px;
background-color:#000;
border:1px red solid;
margin:20px 10px 10px 0;
padding:10px 10px;
float:left;
}
.right{
width:150px;
height:38px;
background-color:blue;
border:1px red solid;
margin:20px 0 10px 10px;
padding:10px 10px;
float:right;
}
/*menu与left，right，main之间的上下边距本应遵从上边的margin原则为20px，但是因为为left，right，main设置了浮动，所以margin的bug不起作用，为40px*/
</style>
</head>
<body>
<div style="margin:0 auto;width:982px;">
<div class="ban"></div>
<div class="menu"></div>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="foot"></div>
</div>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
