DIV+CSS如何布局

　　随着Web2．0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用CSS-DIV制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。由于CSS富含丰富的样式，使页面更加灵活，它可以根据不同的浏览器，达到显示效果的统一和不变形。

       无论使用表格还是CSS，网页布局都是把大块的内容放进网页的不同区域里面。CSS排皈是一种很新的排版理念，首先要将页面使用<div>整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。

       在利用CSS布局页面时，首先要把页面分成几个模块，同时注意各个模块之间的父子关系等。以最简单的框架为例，页面由banner(导航条)、主体内容(content)、菜单导航(1inks)和脚注(footer)几个部分组成，各个部分分别用自己的id来标识，如图19．1所示。

       其页面中的HTML框架代码如下所示。

<div id="container">container　
  <div id="banner">banner</div>
　　<div id="content">content</div>
　　<div id="links">links</div>
　　<div id="footer">footer</div>
　　</div>

　　例子中每个板块都是一个<div>，这里直接使用CSS中的id来表示各个板块，页面的所有DIV块都属于container，一般的DIV排版都会在最外面加上这个父DIV，便于对页面的整体进行调整。对于每个DIV块，还可以再加入各种元素或行内元素。

　　当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等，这里采用的布局如图所示。

　　由图可以看出，在页面外部有一个整体的框架container，banner位于页面整体框架中的最上方，content与links位于页面的中部，其中content占页面的绝大部分，最下面是页面的脚注footer。

　　整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。

　　下面首先对body标记与container父块进行设置，CSS代码如下所示。

body {
　　margin:20px;　
text-align:center;
} 
#container{
　　width:800px;
　　border:2px solid #022000;
　　padding:15px;
}

上面代码设置了页面的边界、页面文本的对齐方式，以及父块的宽度800像素。下面来设置banner板块，其CSS代码如下所示。

#banner{
　　margin-bottom:10px;
　　padding:20px;
　　background-color:#2259ff;
　　border:1px solid #002200;
　　text-align:center;
}

　　这里设置了banner板块的边界、填充、背景颜色等。

　　下面利用float方法将content移动到左侧，links移动到页面右侧，这里分别设置了这两个板块的宽度和高度，读者可以根据需要自己调整。

#content{
　　float:left;
　　width:600px;
　　height:300px;
　　border:1px solid #002200;
　　text-align:center;
}
#links{
　　float:right;
　　width:200px;
　　height:300px;
　　border:1px solid #002200;
　　text-align:center;
}

　　由于content和links对象都设置了浮动屙陛，因此footer需要设置clear·属性，使其不受浮动的影响，代码如下所示。

#footer{
　　clear:both;    /* 不受float影响 */
　　padding:10px;
　　border:1px solid #000000;
　　text-align:center;
}
-->

　　这样页面的整体框架便搭建好了，这里需要指出的是content块中不能放宽度太长的元素，如很长的图片或不换行的英文等，否则links将再次被挤到content下方

　　如果后期维护时希望content的位置与links对调，只需要将content和links属性中的left和right改变。这是传统的排版方式所不可能简单实现的，也正是CSS排版的魅力之一。

　　另外，如果links的内容比content的长，在IE浏览器上footer就会贴在content下方而与links出现重合。