页面布局设计
一、三行模式或三列模式
特点:把整个页面水平、垂直分成三个区域。
三行模式:将页面分成头部、主体及页脚三部分
三列模式:将页面分成左、中、右三个部分
在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结构
headerleftrightfooter
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结构
headerleftcenterrightfooter
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;}
标签:100%,float,height,width,background,DIV,left,CSS,页面
来源: /gly1120/p/7739172.html