CSS教程:div仿框架方法

再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug（不喜欢它可以找点别的办法）：

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 再分出两列</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;} body { height:100%; background:#fff; overflow:hidden;} div { background:#f60; line-height:1.6;} .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;} .side { height:100%; float:left; width:200px; overflow:auto; position:relative;} .main { height:100%; margin-left:207px; overflow:auto; position:relative;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 再分出两列（还是请在ie6下浏览） </div> <div class="bottom"></div> </body> </html>

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

现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前，阅读此文看看是否能消消心头之恨。）

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 让我们荡起双桨</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 让我们荡起双桨 一个兼容性很好的div仿框架的基础概型便完成了 </div> <div class="bottom"></div> </body> </html>

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

它很强大而实用，真的：

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 如果您有丰富的想象力，还可以玩些更刺激的</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:100px; bottom:100px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .mainTop { position:absolute; height:30px; top:60px; left:220px; right:10px;} .mainBottom { position:absolute; height:30px; bottom:60px; left:220px; right:10px;} /*--- ie6 ---*/ html { _padding:100px 10px;} .top { _margin-top:-90px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _padding:30px 0; _margin-top:-30px; _float:left; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainTop { _margin-bottom:10px; _margin-left:210px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainBottom { _margin-top:10px; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="mainTop"></div> <div class="side"> </div> <div class="main"> 如果您有丰富的想象力，还可以玩些更刺激的。 </div> <div class="mainBottom"></div> <div class="bottom"></div> </body> </html>

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

文章共3页: [1] [2] [3]

更多的CSS教程:div仿框架方法请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：网页教学网日期：2009-5-20