下面首先对body标记与container父块进行设1. CSS代码如下:
body {
margin:l5px;
text-align:center;
}
#container{
width:1000px;
border:lpx solid #000000;
padding:l0px;
}
上面代码设置了页面的边界、页面文本的对齐方式.以及父块的宽度为iooopx。下面来设置banner板块，其css代码如下:
#banner{
margin-bottom:5px;
padding:20px;
background-color:#aaaa0f;
border:lpx solid #000000;
text-align:center;
}
这里设里了banner板块的边界、填充、背景颐色等。

#content{
float:left;
width:670px;
height:300px;
background-color:#caOaOf;
border:lpx solid #000000;
text-align:center;
}
#links{
float:right;
width:300px;
height:300px;
background-color: yellow;
border:lpx solid #000000;
text-align:center;
}
由于content和links对象都设置了浮动属性，因此foots苗要设置chear属性.使其不受浮动的形响.代码如下:
ifooter(
clear:both; /.不里float影晌./
padding:l0px;
border:lpx solid #000000;
background-color:green;
text-align:center;
}
这样页面的整体框架就搭建好了。这里需要指出的是content块中不能放宽
度太长的元素.如很长的图片或不折行的英文等.否则links将再次被挤到content下方。
特别地.如果上海网站建设后期维护时希望content的位里与links对调.只需将content和links属性中的left和right改变即可。这是传统的排版方式所不可能简单实现的.这也正是CSS排版的魅力之一。
另外。如果link:的内容比content的长.在IE浏览器上footer就会贴在content下方而与links出现重合.