制作上述的网页效果图：
首先将一层层划分开来，总的来看就是有上中下三大块重要的板块，然后中间又分为左右两大块。
在新建html里用
将界面分为三大块。
<body>
<div id="box">
<div id="menu">
我是菜单
</div>
<div id="main">
中间部分
</div>
<div id="footer">
footer
</div>
</div>
</body>
再将中间部分分为左右两大块
<div id="left">
左边区域
</div>
<div id="right">
右边区域
</div>
在box里边插入图片：
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了"/>
</div>
在新建的css中将各个板块的参数设置出来，比如颜色、高度等等。
#box{
background-color:#F9F;
width:1024px;
hight:1300px;
/*margin:0 auto;/*居中*/
margin:0 auto 0 auto;/*上右下左*/
}
#banner{
background-color:#3CC;
height:209px;
}
#menu{
background-color:#9CC;
height:50px;
}
#main{
background-color:#6C6;
height:1000px;
}
#left{
background-color:#960;
height:1000px;
width:250px;
float:left;/*可以使div横向排排坐*/
}
#right{
background-color:#900;
height:1000px;
width:774px;
float:right;/*可以使div横向排排坐*/
}
#footer{
background-color:#39F;
height:80px;
}
/* CSS Document */