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>

  • 相关阅读:
    安装 oracle
    svn 编辑
    软件构架
    liunx操作
    css的样式分类
    简单自己做了一个个人简历
    网页制作之表格,列表
    MYSQL表创建
    linux操作指令 第二部分
    linux操作指令 第一部分
  • 原文地址:https://www.cnblogs.com/weihengblogs/p/2830973.html
Copyright © 2011-2022 走看看