660
div+css???????????????-??????-????????????-?????????
??<html>
<head>
<style type="text/css">
body
{
??background:#999;
??text-align:center;
??color:#333;
??font-family:Arial, Verdana, Sans-serif;
}
#header
{
??width:776px;
??margin-left:auto;
??margin-right:auto;
??padding:0px;
??background:#eee;
??height:60px;
??text-align:center;
}
#container
{
??margin-left:auto;
??margin-right:auto;
??width:776px;
}
#mainbg
{
??width:776px;
??padding: 0px;
??background:yellow;
??float:left;
}
#right
{
??float:right;
??margin:2px 0px 2px 0px;
??padding:0px;
??width:574px;
??background:lightblue;
??text-align:left;
}
#left
{
??float:left;
??margin:2px 2px 0px 0px;
??padding:0px;
??background:yellow;??????????
??width:200px;
??text-align:left;
}
#footer
{
??clear:both;
??width:776px;
??margin-right:auto;
??margin-left:auto;
??padding:0px;
??background:#eee;
??height:60px;
}
.text
{
??margin:0px;
??padding:20px;
}
??
</style>
</head>
<body>
<div >header</div>
<div >
??<div >
????<div >
??????<div >right<br /><br /><br /><br /><br />
??????</div>
????</div>
????<div >
??????<div >left</div>
????</div>
??</div>
</div>
<div >
??footer
</div>
</body>
</html>
????????????????????????mainbg???left???right?????????!??????mainbg??????????????????left??????????????????????????????????????????
??
??????????????????????????????
?????????????????????body???????????????#header????????????????????????body??????text-align???center?????????header??????margin-left???auto???margin-right???auto??????????????????header??????????????????????????????????????????IE??????????????????body???text-align:center??????????????????????????????mozilla???firefox???????????????margin???auto????????????
??
????????????left???right?????????????????????????????????????????????????????????????????????container???????????????margin???auto?????????????????????????????????left???right????????????????????????
??
??????????????????????????????container???left???right??????????????????mainbg????????????????????????????????????????????????????????????????????????????????????????????????container????????????????????????????????????????????????????????????mozilla???firefox???????????????????????????????????????????????????firefox???ie???????????????????????????????????????ie?????????????????????????????????mozilla?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????mainbg???????????????mainbg????????????float???left?????????????????????????????????????????????????????????
??
???????????????????????????footer??????????????????????????????clear???both??????????????????????????????footer??????????????????????????????????????????footer?????????header???????????????mozilla?????????:)
??
??????????????????over???,??????????????????????????????left???right????????????????????????,????????????????????????.text{margin:0px;padding:20px}????????????????????????????????????mozilla???ie???????????????????????????????????????????????????margin???padding?????????mozilla???ie???????????????????????????????????????ie???mozilla?????????????????????????????????????????????????????????
??
??????????????????????????????????????????????????????
最后更新：2017-04-02 22:16:12