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

     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>
  • 相关阅读:
    form 表单验证常用正则记录
    定位某一项值在多维数据中的位置
    jquery weui picker多次动态赋值
    页面旋转立方体图片
    微信开发者工具中的正则表达式解析
    Jquery WEUI 滚动加载(infinite)不触发
    背景线条实现
    进入博客
    tomcat 修改内存配置
    win10配置jdk环境变量
  • 原文地址:https://www.cnblogs.com/asqq/p/2833438.html
Copyright © 2011-2022 走看看