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

    <!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>

  • 相关阅读:
    随便练习的进制转换
    回顾快速排序
    常用c++函数
    POJ 1163 The Triangle
    HDU 1155 Bungee Jumping
    ZOJ 3861 Valid Pattern Lock
    POJ 1273 Drainage Ditches
    Hrbust 2240 土豪的时代
    POJ 3468 A Simple Problem with Integers
    POJ 1061 青蛙的约会
  • 原文地址:https://www.cnblogs.com/zty1294625258/p/14151090.html
Copyright © 2011-2022 走看看