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>
  • 相关阅读:
    实现垂直居中
    三栏布局(双飞翼布局和圣杯布局)
    JavaScript执行机制
    使用vue-cil搭建项目
    格式化上下文formatting contexts
    定位体系(定位机制)
    CSS盒子模型
    可视化格式模型(visual formatting model)
    CSS布局开篇
    Linux之vi三种模式常用操作
  • 原文地址:https://www.cnblogs.com/asqq/p/2833438.html
Copyright © 2011-2022 走看看