css制作网页咨讯框,CSS制作网页实例:DIV仿框架结构

[参与测试的浏览器：IE6中/ IE7中/ IE8的/ FF3 /执行部分第10 / SF4 / Chrome2]

[操作系统：窗口]

先看代码：

运行代码框

“！文档类型的HTML公众” - / / W3C的/ / DTD的XHTML 1.0过渡/ /英“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“”

的

利用箱尺寸实现分区仿框架“/标题”

*(保证金：0;填充：0;)

的HTML(- WebKit的盒，大小：边界盒; -莫兹-盒大小：边界盒，箱大小：边界盒;填充：100px 0;溢出：隐藏;)

html文件，身体(身高：100％;)

。顶端(位置：亲属;保证金顶：- 100px;高度：100px;背景：＃液晶显示屏;)

。方(位置：亲属;身高：100％;背景：＃fc0;溢出：汽车;宽度：200px;浮动：左，缘右：0！重要，缘右：- 3px;溢出：汽车;)

。主要(位置：亲属;溢出：汽车;高度：100％;背景：＃f30;)

。底部(位置：亲属;高度：100px;背景：＃液晶显示屏，清晰的：既;)

“/样式”

“/头”

的

顶端

“/分区”

旁边

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“/分区”

主要的

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“商业登记/“

“/分区”

底部

“/分区”

“/体”

“/的HTML”

[Ctrl + A全全部选择提示：你可先修改部分代码，再按运行]

关键部分：

的HTML(- WebKit的盒，大小：边界盒; -莫兹-盒大小：边界盒，箱大小：边界盒;填充：100px 0;溢出：隐藏;)

原理大概就是这样的：

千言万语抵不过一副画，通过整容前后的对比，大家应该能看出盒大小：边界盒的作用了。

了解盒大小的同学们应该知道，它来自离微国比较遥远的css3世界，因此IE6/IE7是不支持的，但我很负责任滴说：本演示正常兼容IE6/IE7。

因为... ...

IE6/IE7下和的盒子大小默认值本就是边界盒(注：IE7的有一点点不正常，溢出：隐藏后神志有所恢复，将不影响本演示正常运作)。，

现在的问题就是是不是要采用这个方法了，给点优劣的对比，大家自行斟酌吧：

比较使用绝对定位的方法来实现，这个方法在目前主要存在两个优势：

针对每种浏览器基本使用的同一方法，的CSS代码简单，易修改，易理解。 (责任编辑：大宝库)