zoukankan      html  css  js  c++  java
  • 用absolute进行页面的自适应布局

    用position:absolute和top,left,bottom,right进行设置可以进行页面的头部,底部,左边框,内容的自适应布局,可以代替position:fixed;

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="name" content="content" charset="utf-8">
    <title>absolute布局</title>
    <style type="text/css" media="screen">
    .header{position: absolute;left: 0;right: 0;height: 60px;background-color: #cfcfcf;top:0;text-align: center;line-height: 60px;}
    .aside{position:absolute;left: 0;top: 60px; 80px;bottom: 0;background-color: #666666;text-align: center;}
    .content{position: absolute;left: 80px;top: 60px;bottom: 60px;right: 0;background-color: #3d85c6;text-align: center;}
    .footer{position: absolute;left: 0;right: 0;height: 60px;bottom: 0;background-color: #6aa84f;text-align: center;}
    </style>
    </head>
    <body>
    <div class="header">header</div>
    <div class="aside">aside</div>
    <div class="content">
    content
    </div>
    <div class="footer">
    footer
    </div>
    </body>
    </html>

    效果如下:

    移动端:

    pc端:

  • 相关阅读:
    Nokia N78拍照最佳设置!
    摩托Milestone购机鉴别篇
    sdf
    js随笔
    jssip无法识别以数字开始的域
    ASP.NET页面生命周期与优化
    在SQLServer2005中使用全文搜索
    简析正则表达式
    《WCF编程》之错误
    《WCF编程》之实例管理
  • 原文地址:https://www.cnblogs.com/wxw1314/p/5231399.html
Copyright © 2011-2022 走看看