zoukankan      html  css  js  c++  java
  • 网页布局自适应的布局方法

    网页布局自适应的布局方法

    <!--方法一-->
    <style type="text/css">
            html,body{margin:0; height:100%;}
            #main{height:100%; margin:0 21%; background:#ffe6b8;}
            #left,#right{width:20%; height:100%; background:#a0b3d6;}
            #left{float:left;}
            #right{float:right;}
        </style>
    </head>
    <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    </body>
    
    <!--方法二-->
    <style type="text/css">
            html,body{margin:0; height:100%;}
            #main{width:100%; height:100%; float:left;}
            #main #body{margin:0 21%; background:#ffe6b8; height:100%;}
            #left,#right{width:20%; height:100%; float:left; background:#a0b3d6;}
            #left{margin-left:-100%;}
            #right{margin-left:-20%;}
        </style>
    </head>
    <body>
    <div id="main">
        <div id="body"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
    </body>
    
    <!--方法三-->
    <style type="text/css">
            html,body{margin:0; height:100%;}
            #left,#right{position:absolute; top:0; width:20%; height:100%;}
            #left{left:0; background:#a0b3d6;}
            #right{right:0; background:#a0b3d6;}
            #main{margin:0 21%; background:#ffe6b8; height:100%;}
        </style>
    </head>
    
    <body>
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
    </body>
    
    
    参照:http://www.zhangxinxu.com/wordpress/?p=370

    参照:http://www.zhangxinxu.com/wordpress/?p=370

  • 相关阅读:
    寒假一:打印沙漏
    秋季学期总结
    三位我尊敬的老师
    自我介绍
    polay计数原理
    2020-2021 ACM-ICPC, Asia Seoul Regional Contest
    2017-2018 ACM-ICPC Northern Eurasia(A.Archery Tournament)
    FTT简单入门板子
    佩尔方程最小解模板
    求组合数
  • 原文地址:https://www.cnblogs.com/mina-huojian66/p/6283213.html
Copyright © 2011-2022 走看看