经典页面布局,任何分辨率下,全屏显示

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>经典页面布局,任何分辨率下,全屏显示</title>
 6 <style type="text/css">
 7 *{ list-style:none; margin:0; padding:0;}
 8 html{ height:100%; overflow:hidden;}
 9 body{ background:red; height:100%;}
10 .top,.left,.right,.bottom{ background:#000; position:absolute;}
11 .top{ height:70px; left:10px; top:10px; right:10px;}
12 .left{ width:300px; left:10px; top:90px; bottom:90px;}
13 .right{ left:320px; right:10px; top:90px; bottom:90px;}
14 .bottom{height:70px; left:10px; right:10px; bottom:10px;}
15 </style>
16 <!--[if IE 6]>
17 <style type="text/css">
18 html{ padding:90px 10px;}
19 .top,.left,.right,.bottom{ position:relative; top:0; right:0; bottom:0; left:0;}
20 .top{margin-top:-80px;}
21 .left{height:100%;margin-top:10px; float:left;}
22 .right{height:100%; margin:10px 0 0 320px;}
23 .bottom{margin-top:10px;}
24 </style>
25 <![endif]-->
26 </head>
27 <body>
28 <div class="top"></div>
29 <div class="left"></div>
30 <div class="right"></div>
31 <div class="bottom"></div>
32 </body>>
33 </html>

 

posted @ 2012-08-26 09:45  lines  阅读(711)  评论(2编辑  收藏  举报