给你个参考
<html>
<head>
<style>
h1{
font-size:40px
text-align:center
}
#page{
width:300px
height:500px
margin:0 auto
}
#header{
border: 1px red dashed
width:100%
height:80px
background: #FDFDFD
}
#content{
border: 1px red dashed
background: #FFFADD
width:100%
height:300px
margin:0 auto
}
#left{
border: 1px red dashed
width:80px
height:100%
float:left
}
#right{
border: 1px red dashed
height:100%
width:200px
float:right
}
#footer{
border-style:dashed
width:100%
height:80px
background: #FDFDFD
border: 1px red dashed
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="content">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
效果如下：你参考着慢慢写吧
<div style="width:15%height:140pxfloat:leftbackground:#999">1</div><div style="width:70%height:20pxfloat:leftbackground:#0C9">2</div>
<div style="width:15%height:80pxfloat:rightbackground:#C9F">3</div>
<div style="width:70%height:20pxfloat:leftbackground:#0C6">4</div>
<div style="width:15%height:20pxfloat:leftbackground:#609">5</div>
<div style="width:40%height:20pxfloat:leftbackground:#CF6">6</div>
<div style="width:15%height:40pxfloat:rightbackground:#6CC">7</div>
<div style="width:55%height:20pxfloat:leftbackground:#F0F">8</div>
<div style="width:40%height:20pxfloat:leftbackground:#300">9</div>
<div style="width:45%height:60pxfloat:rightbackground:#00C">11</div>
<div style="width:40%height:40pxfloat:leftbackground:#6F0">10</div>
关键在于3，7，11的float为right，且 11要在10之前
1、选中DIVb2，点击右侧CSS选项卡下的+号，添加CSS样式定义。
2、在新建CSS规则面板下选择#b2（对应DIV b2的ID），确定。
3、在CSS规则定义面板左侧分类下选择方框，右侧输入对应的数值。b2的DIV定义好了
4、下面定义DIV001，同样选中DIV001，点+号新建CSS。
5、在CSS规则定义下选择“背景”，选择好色彩，
6、选择“方框”，定义DIV001的宽，高，浮动float为left。
7、同DIV001一样，新建DIV002样式。
8、选择背景色
9、选择方框后，填写DIV002的样式属性值，注意，因为它是向右浮动的，所以这里的FLOAT要选择为right。
10、同DIV001一样，新建并设定DIV003的参数
11、定义DIV004的样式，因为DIV004和上面的DIV-B2是一样的宽度，所以这里设置为width:400px，Clear为both，防止有的浏览器兼容性问题而位移。
12、设置完毕，查看左侧的效果。
