我的书签
添加书签
移除书签14.3.3 定义主要的DIV
初次使用CSS布局，采用固定宽度的三列布局（比自适应分辨率的设计简单），分别定义左、中、右的宽度为200:300:280，在CSS中定义如下。
mainbox{
/设置本对象居中/
MARGIN：auto；
BORDER：0px；
/设置背景颜色/
BACKGROUND：#fff；
/设置宽度/
WIDTH：778px；
}
left{
/下面是设置宽高内外补丁/
width：200px；
height：400px；
margin：0px；
padding：0px；
/设置向左漂移/
float：left；
/设置背景颜色/
background：#CDCDCD；
}
middle{
padding：0px；
float：left；
width：200px；
height：400px；
background：#DADADA；
}
right{
width：378px；
float：left；
height：400px；
background：#cccccc；
}
header{
MARGIN：auto；
BORDER：0px；
BACKGROUND：#ccd2de；
WIDTH：778px；
HEIGHT：60px；
border：1px solid#000000；
}
footer{
/清除左右的漂移/
CLEAR：both；
/设置对象居中/
MARGIN：auto；
/设置内补丁上下为5像素，其他边为0/
PADDING：5px 0px 5px 0px；
BACKGROUND：#ccd2de；
WIDTH：778px；
HEIGHT：40px；
}
注意 定义中列和右列div，都采用了POSITION：absolute；，然后分别定义了LEFT：200px；TOP：0px；和LEFT：500px；TOP：0px；这是这个布局的关键，采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px。
这时整个页面的代码，如代码14.6所示。
代码14.6 源代码\第14章\用DIV+CSS布局.html
—————————————-文件名：用DIV+CSS布局.html—————————————-
01 ＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
02 "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
03 ＜html＞
04 ＜head＞
05 ＜title＞DIV+CSS布局＜/title＞
06 ＜link type="text/css"rel="stylesheet"href="div.css"＞
07 ＜/head＞
08 ＜body＞
09 ＜！-头部层—＞
10 ＜div id="header"＞
11 头部
12 ＜/div＞
13 ＜！-中间层—＞
14 ＜div id="mainbox"＞
15 ＜div id="left"＞页面左列＜/div＞
16 ＜div id="middle"＞页面中列＜/div＞
17 ＜div id="right"＞页面右列＜/div＞
18 ＜/div＞
19 ＜！-底部层—＞
20 ＜div id="footer"＞
21 ＜/div＞
22 ＜/body＞
23 ＜/html＞
【代码解析】代码第10～21行的运行效果仅为3个并列的灰色矩形。但在中间部分设置了3个层，用CSS来布局可以把HTML代码调协成不同的效果，这完全由CSS控制。想满屏显示，那该怎么办呢？只须设置宽度为100%即可，满屏在DIV中的效果如图14.3所示。
图 14.3 用DIV+CSS布局
