div+css布局之padding和margin的使用，及自适应100%的宽度

整体效果图：

 

话不多说，大家自己看，相信会有帮助

<div class="cBody">
  <div class="Top_Bg">黑色背景部分宽度为1002px;加上两边红色的1px边框宽度，整个宽度是1004px</div>
</div>
<div class="cBody">
  <div class="BabyContent">
    <div class="Babyleft">
      <div class="lefttop"></div>
      <div class="leftbg">
        <div class="LbgTop"></div>
        <div class="bName">安娜的小窝</div>
      </div>
      <div class="leftbuttom"></div>
    </div>
    <div class="Babycenter"></div>
    <div class="Babyright">
      <div class="LbgTop"></div>
      <div class="bName">安娜的小窝</div>
    </div>
  </div>
</div>

 

 

下面是css样式部分

 

body {margin:0;padding:0;background:#fff;}
div{color:#333;font-family:"verdana","arial", "sans-serif","宋体";font-size:12px;}

.cBody{width:100%;text-align:center;margin-top:5px;}
.Top_Bg{width:1002px;border:solid 1px red; background-color:#000000;color:#FFFFFF;text-align:center;margin:0 auto;}
.BabyContent{width:1004px;margin:0 auto;}
/*左边部分*/
.Babyleft{width:202px;float:left;}
.lefttop{width:202px;height:2px;background:url(http://www.imythu.cn/images/BLeftTop.jpg) no-repeat;overflow:hidden;}
.leftbg{width:196px;background:url(http://www.imythu.cn/images/BLeftBg.jpg) repeat-y;padding:1px 4px 2px 2px;}
.LbgTop{width:100%;background:url(http://www.imythu.cn/images/warror.gif) no-repeat 3px 5px; background-color:#FF6600;height:20px;}
.bName{margin-top:10px;margin-left:5px;margin-bottom:5px;margin-right:5px;border-bottom:solid 1px #ccc;text-align:left;padding-left:10px;padding-bottom:5px;color:#FF3300;font-size:16px; position:static;float:inherit;}
.leftbuttom{width:202px;height:2px;background:url(http://www.imythu.cn/images/BLeftButtom.jpg) no-repeat;overflow:hidden;}
/*左边部分*/
.Babycenter{width:328px;float:left;margin-left:2px;height:200px;border:solid 1px #ccc;}
.Babyright{width:466px;float:left;margin-left:2px;border:solid 1px #ccc;}