九宫格布局练习。
时间：2011-04-07 来源：默^_^默
<!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=gb2312" />
<title>九宫格练习</title>
<style type="text/css">
*{margin:0;padding:0; font-size:12px;}
.box{position:relative; overflow:hidden; width:50%; background:#F34703;}
/*上面3格定义*/
.t_l, .t_c, .t_r{position:absolute; top:0; z-index:2;}
.t_l, .t_r{width:12px; background:blue;}
.t_l{left:0;}
.t_r{right:0;}
.t_c{width:100%; background:orange; z-index:1;}
/*中间3格定义*/
.c_l, .c_r{position:absolute; top:0; z-index:1; background:orange;width:12px;}
.c_l{left:0;}
.c_r{right:0;}
.c_c{width:100%;}
/*下面3格定义*/
.b_l,.b_c, .b_r{position:absolute; bottom:0;}
.b_l, .b_r{background:blue; width:12px; z-index:1;}
.b_l{left:0;}
.b_r{right:0;}
.b_c{width:100%; background:orange;}
</style>
</head>
<body>
<div class="box">
<div class="t_l"></div>
<div class="t_c"></div>
<div class="t_r"></div>
<div class="c_l"></div>
<div class="c_c">
<div style="padding:20px;">
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
<div style="text-align:right;">默默学习者练习</div>
</div>
</div>
<div class="c_r"></div>
<div class="b_l"></div>
<div class="b_c"></div>
<div class="b_r"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>九宫格练习</title>
<style type="text/css">
*{margin:0;padding:0; font-size:12px;}
.box{position:relative; overflow:hidden; width:50%; background:#F34703;}
/*上面3格定义*/
.t_l, .t_c, .t_r{position:absolute; top:0; z-index:2;}
.t_l, .t_r{width:12px; background:blue;}
.t_l{left:0;}
.t_r{right:0;}
.t_c{width:100%; background:orange; z-index:1;}
/*中间3格定义*/
.c_l, .c_r{position:absolute; top:0; z-index:1; background:orange;width:12px;}
.c_l{left:0;}
.c_r{right:0;}
.c_c{width:100%;}
/*下面3格定义*/
.b_l,.b_c, .b_r{position:absolute; bottom:0;}
.b_l, .b_r{background:blue; width:12px; z-index:1;}
.b_l{left:0;}
.b_r{right:0;}
.b_c{width:100%; background:orange;}
</style>
</head>
<body>
<div class="box">
<div class="t_l"></div>
<div class="t_c"></div>
<div class="t_r"></div>
<div class="c_l"></div>
<div class="c_c">
<div style="padding:20px;">
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
九宫格布局，自由拖动浏览器，跟随浏览器拖动而调整布局。<br />
<div style="text-align:right;">默默学习者练习</div>
</div>
</div>
<div class="c_r"></div>
<div class="b_l"></div>
<div class="b_c"></div>
<div class="b_r"></div>
</div>
</body>
</html>
相关阅读 更多 +
