zoukankan      html  css  js  c++  java
  • 经典页面布局,任何分辨率下,全屏显示

    <!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" />
    <title>经典页面布局,任何分辨率下,全屏显示</title>
    <style type="text/css">
    *{ list-style:none; margin:0; padding:0;}
    html{ height:100%; overflow:hidden;}
    body{ background:red; height:100%;}
    .top,.left,.right,.bottom{ background:#000; position:absolute;}
    .top{ height:70px; left:10px; top:10px; right:10px;}
    .left{ 300px; left:10px; top:90px; bottom:90px;}
    .right{ left:320px; right:10px; top:90px; bottom:90px;}
    .bottom{height:70px; left:10px; right:10px; bottom:10px;}
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html{ padding:90px 10px;}
    .top,.left,.right,.bottom{ position:relative; top:0; right:0; bottom:0; left:0;}
    .top{margin-top:-80px;}
    .left{height:100%;margin-top:10px; float:left;}
    .right{height:100%; margin:10px 0 0 320px;}
    .bottom{margin-top:10px;}
    </style>
    <![endif]-->
    
    </head>
    <body>  
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    </body>>
    </html>
    
  • 相关阅读:
    Jquery Plugin模版
    jquery之extend
    java反射技术实例
    java基础汇总
    Java学习路线
    java的一个爬虫
    Java深度理解——Java字节代码的操纵
    java编程思想-基础
    hdu 5201 The Monkey King【容斥原理+组合数学】
    容斥原理
  • 原文地址:https://www.cnblogs.com/asqq/p/2426785.html
Copyright © 2011-2022 走看看