zoukankan      html  css  js  c++  java
  • 双飞翼布局

    <style>
            *{
                margin:0;padding:0;
                /* color:#fff; */
            }
            .header{
                background: orange;
                height:150px;
            }
            
            .footer{
                background: pink;
                height:100px;
            }
            .middle{
                background: green;
                height:300px;
                overflow: hidden;
            }
            .left{
                float:left;
                background: blue;
                color:#fff;
                width:150px;
                height:16px;
                margin-left:-100%;
                margin-bottom:-9999px;
                padding-bottom: 9999px;
            }
            .mid{
                background: red;
                float:left;
                width:100%;
                
            }
            .inner{
                margin-left:150px;
                margin-right:100px;
                background: yellow;
                /* margin-bottom:-9999px;
                padding-bottom: 9999px; */
                }
            .right{
                float:right;
                background: aquamarine;
                width:100px;
                height:16px;
                margin-left:-100%;
                /* margin-bottom:-9999px;     设置3个等高:先用padding撑开,为不影响下面元素,再用margin:-9999px收回
                padding-bottom: 9999px; */    
            }
        </style>
    <div class="header">我是头</div>
        <div class="middle">
            <div class="mid"><div class="inner">我是中间 ,是重要部分</div></div>     
    <div class="left">我是左</div> <div class="right">我是右</div> </div> <div class="footer">我是尾</div>

    实现了主要部分放最上面,最先解析,两边固定在最左最右,中间自由缩放

  • 相关阅读:
    Springboot整合Dubbo
    网站appache的ab命令压力测试性能
    静态页面框架
    CSS布局设计
    弹性盒子的总结
    弹性盒子
    应用媒介查询制作响应式导航栏
    响应式的设计需要遵守的4个原则和媒介查询语句
    media type的类型汇总
    background-orgin属性
  • 原文地址:https://www.cnblogs.com/xsffliu/p/8005325.html
Copyright © 2011-2022 走看看