DIV+CSS页面布局

页面布局设计

一、三行模式或三列模式

特点：把整个页面水平、垂直分成三个区域。

三行模式：将页面分成头部、主体及页脚三部分

三列模式：将页面分成左、中、右三个部分

在CSS文件里：

1.三行模式代码

#header{ width:100%; height:120px; background:#223344;}

#main{ widrh:100%; height:500px; background:#553344;}

#footer{ width:100%; height:40px; background:#993344;}

2.三列模式代码

#left{ width:30%; height:700px;background:#223344; float:left;}

#center{ widrh:50%; height:700px; background:#553344;float:left;}

#fright{ width:20%; height:700px; background:#993344;float:left;}

二、    三行两列、三行三列模式

特点：先将整个页面水平分成三个区域，再将中间区域分成两列或三列。

三行两列模式：

1.DIV结构

<div id="header" class="">header</div>

<div id="main" class="">

　　　　<div id="left" class="">left</div>

　　　　<div id="right" class="">right</div>

</div>

<div id="footer" class="">footer</div>

2.CSS结构

#header{ width:100%; height:120px; background:#99ff00;}

#main{ widrh:100%; height:400px; background:#99ff99;}

#left{ width:30%; height:100%;float:left; background:#999999;}

#fright{ width:70%; height:100%; float:left; background:#553344;}

#footer{ clear:both; width:100%; height:80px; background:#66ff66;}

三行三列模式：

1.DIV结构

<div id="header" class="">header</div>

<div id="main" class="">

　　　　<div id="left" class="">left</div>

　　　　<div id="center" class="">center</div>

　　　　<div id="right" class="">right</div>

</div>

<div id="footer" class="">footer</div>

2.CSS结构

#header{ width:100%; height:120px; background:#99ff00;}

#main{ widrh:100%; height:400px; background:#99ff99;}

#left{ width:30%; height:100%;float:left; background:#999999;}

#center{ width:40%; height:100%;float:left; background:#FF3344;}

#fright{ width:30%; height:100%; float:left; background:#553344;}

#footer{ clear:both; width:100%; height:80px; background:#99ff66;}