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>
    
  • 相关阅读:
    MongoDB 之 手把手教你增删改查 MongoDB
    MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB
    全栈12期的崛起之捡点儿有用的说说
    Python 常用模块
    Python3中的内置函数
    Python程序员之面试必回习题
    Django之初始庐山真面目
    Django之ORM操作
    MySQL-索引
    MySQL-函数
  • 原文地址:https://www.cnblogs.com/asqq/p/2426785.html
Copyright © 2011-2022 走看看