zoukankan      html  css  js  c++  java
  • 页面布局

    方案1

    <style type="text/css">
         #main {min-60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
         #main-left {margin-left:-300px;300px;min-height:400px;background:#98FF1A;}
         #main-right {min-height:400px;background:#7CC0FF;}
         .float {float:left;}
         .clear{clear:both: height : 0; line-height:0; font-size:0;}
    </style>
    <div id="main">
         <div id="main-left"  class="float">
                这个是左边部分,宽度确定
         </div>
         <div id="main-right">
                这个是右边部分,宽度自动扩展
         </div>
         <div class="clear"></div>
    </div>
    

    父元素padding-left:300px,每行留给子元素的宽度=父元素宽度-300px;
    这时让左侧元素宽度为300px,并且设置左边距为-300px,则左侧块与父元素左边距重合了。
    右侧元素宽度百分之百自适应父元素宽度。

    方案2

    圣杯和双飞翼布局
    https://github.com/rccoder/blog/issues/6

    <div class="head">head</div>
    
    <div class="content">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    
    <div class="foot">foot</div>
    

    圣杯主要思想

    .left, .right, .main {
        float: left;
    }
    .left {
         40px;
        height: 60px;
        background-color: #B9E078;
        margin-left: -100%;
    }
    .right {
         60px;
        height: 80px;
        background-color: #FF9900;
        margin-left: -60px;
    }
    .main {
        background-color: crimson;
         100%;
    }
    .content {
        padding: 0 60px 0 40px;
    }
    

    关键点1:

    main, left, right 我们都可以看做是在一个浮动流中,依次的顺序也是 main left right。目前是因为 main 占了100% 从而导致 left 与 right 不能和 main 浮在同一行了,这个时候我们可以利用负边距来让 left 向前移动 (即 margin-left 为正的时候就是和左边的盒子的外边距,那么为负的时候就是像前移动了)。

    关键点2:

    给content一个内边距,这样就不会出现left和main,以及right和main的重叠了

    双飞翼布局主要思想

    <div class="head">head</div>
    
    <div class="content cleanfix">
        <div class="main">
            <div class="wrap">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    
    <div class="foot">foot</div>
    

    双飞翼布局和圣杯布局很像,区别是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right,而不是给content一个padding。

    .wrap {
        background-color: darkmagenta;
        margin-left: 40px;
        margin-right: 60px;
    }
    
  • 相关阅读:
    oracle学习篇十:序列
    oracle学习篇九:同义词
    oracle相关常识
    oracle之数据同步:Oracle Sql Loader使用说明(大批量快速插入数据库记录)
    oracle学习篇八:约束
    oracle学习篇七:更新操作、事务处理
    oracle学习篇六:子查询
    oracle学习篇五:组函数,分组统计
    oracle学习篇四:多表查询
    oracle学习篇三:SQL查询
  • 原文地址:https://www.cnblogs.com/redirect/p/10066670.html
Copyright © 2011-2022 走看看