zoukankan      html  css  js  c++  java
  • 圣杯布局

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握。

    事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

     

    通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。注意:当你缩放页面的时候,宽度不能小于700PX,为了安全起见,最好还是给body加一个最小宽度!
    如果你有了那么一点理解以后,我们来看看圣杯布局的实现:

    注:reset部分的代码大家自行添加

    1.HTML结构:

    复制代码
     1 <header>
     2     <h4>Header内容区</h4>
     3 </header>
     4 <div class="container">
     5     <div class="middle">
     6         <h4>中间弹性区</h4>
     7     </div>
     8     <div class="left">
     9         <h4>左边栏</h4>
    10     </div>
    11     <div class="right">
    12         <h4>右边栏</h4>
    13     </div>
    14 </div>
    15 <footer>
    16     <h4>Footer内容区</h4>
    17 </footer>                
    复制代码

    有人可能会有疑惑,为什么中间的主体部分要写在最前面。因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是100%。

    2.css样式:

    复制代码
    header{
        width: 100%;
    height: 40px; background-color: #8ecfd4; } .container{ overflow:hidden; } .middle{ width: 100%; background-color: #f7f537; float:left; } .left{ width: 200px; background-color: #37f7c8; float:left; } .right{ width: 200px; background-color: #eb6100; float:left; } footer{ width: 100%; height: 30px; background-color: #8ecfd4; }
    复制代码

     

    此时的效果图:

     

    这时中间的三栏并没有在一行内显示,原因也很明确。三栏都浮动起来了,但是middle栏的宽度设置成了100%,到时左右两边的撑不下换行显示了。

     

    现在我们需要做的是将left栏放到左侧,right栏放到右侧。那么我们就需要css的负margin了。

    3.利用负边距布局

    让左边的盒子上去
    .left{
        margin-left:-100%;
    }

    让右边的盒子上去

    .right {
        margin-left:-200px;
    }

     

    此时的效果图

    实现固比固布局

     

    虽然现在貌似已经实现了我们想要的布局,但是在中间填充内容的时候我们还是会发现问题。这一步我们也将中间的主体部分给一个高度,方便视觉效果。

    复制代码
    .middle{
        width: 100%;
        height: 200px; 
        background-color: #f7f537;
        float:left;
    }
    .left{    
        width: 200px;
        height: 200px;
        background-color: #37f7c8;
        float:left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: #eb6100;
        float:left;
    }            
    复制代码

     

     

     

    从上面的效果图可以看出,middle栏的内容被两边的部分遮挡住的,这并不是我们想要的,所以我们的工作还得继续。

    4.让中间自适应的盒子安全显示(利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。)

    .container{ 
        padding: 0 200px;
    }

    这里的200px是左右盒子的宽度。

    效果如下: 

     

    利用父级的内边距将盒子往中间挤

    我们可以看到,左右两边的内边距是有了,但是中间盒子上的内容还是被压着。

     

    5.左右两边分开来(给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置left和right值。)

    复制代码
    .left{ 
        position: relative; 
        left: -200px;
    }
    .right{
        position: relative;
        right: -200px;
    }
    复制代码

     

    看最终效果图 

     

    现在我们的圣杯布局就OK啦

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握。

    事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。

     

    通过缩放页面就可以发现,随着页面的宽度的变化,这三栏布局是中间盒子优先渲染,两边的盒子框子固定不变,即使页面宽度变小,也不影响我们的浏览。注意:当你缩放页面的时候,宽度不能小于700PX,为了安全起见,最好还是给body加一个最小宽度!
    如果你有了那么一点理解以后,我们来看看圣杯布局的实现:

    注:reset部分的代码大家自行添加

    1.HTML结构:

    复制代码
     1 <header>
     2     <h4>Header内容区</h4>
     3 </header>
     4 <div class="container">
     5     <div class="middle">
     6         <h4>中间弹性区</h4>
     7     </div>
     8     <div class="left">
     9         <h4>左边栏</h4>
    10     </div>
    11     <div class="right">
    12         <h4>右边栏</h4>
    13     </div>
    14 </div>
    15 <footer>
    16     <h4>Footer内容区</h4>
    17 </footer>                
    复制代码

    有人可能会有疑惑,为什么中间的主体部分要写在最前面。因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是100%。

    2.css样式:

    复制代码
    header{
        width: 100%;
    height: 40px; background-color: #8ecfd4; } .container{ overflow:hidden; } .middle{ width: 100%; background-color: #f7f537; float:left; } .left{ width: 200px; background-color: #37f7c8; float:left; } .right{ width: 200px; background-color: #eb6100; float:left; } footer{ width: 100%; height: 30px; background-color: #8ecfd4; }
    复制代码

     

    此时的效果图:

     

    这时中间的三栏并没有在一行内显示,原因也很明确。三栏都浮动起来了,但是middle栏的宽度设置成了100%,到时左右两边的撑不下换行显示了。

     

    现在我们需要做的是将left栏放到左侧,right栏放到右侧。那么我们就需要css的负margin了。

    3.利用负边距布局

    让左边的盒子上去
    .left{
        margin-left:-100%;
    }

    让右边的盒子上去

    .right {
        margin-left:-200px;
    }

     

    此时的效果图

    实现固比固布局

     

    虽然现在貌似已经实现了我们想要的布局,但是在中间填充内容的时候我们还是会发现问题。这一步我们也将中间的主体部分给一个高度,方便视觉效果。

    复制代码
    .middle{
        width: 100%;
        height: 200px; 
        background-color: #f7f537;
        float:left;
    }
    .left{    
        width: 200px;
        height: 200px;
        background-color: #37f7c8;
        float:left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: #eb6100;
        float:left;
    }            
    复制代码

     

     

     

    从上面的效果图可以看出,middle栏的内容被两边的部分遮挡住的,这并不是我们想要的,所以我们的工作还得继续。

    4.让中间自适应的盒子安全显示(利用父级元素设置左右内边距的值,把父级的三个子盒子往中间挤。)

    .container{ 
        padding: 0 200px;
    }

    这里的200px是左右盒子的宽度。

    效果如下: 

     

    利用父级的内边距将盒子往中间挤

    我们可以看到,左右两边的内边距是有了,但是中间盒子上的内容还是被压着。

     

    5.左右两边分开来(给左右两个盒子加一个定位,加了定位之后左右两个盒子就可以设置left和right值。)

    复制代码
    .left{ 
        position: relative; 
        left: -200px;
    }
    .right{
        position: relative;
        right: -200px;
    }
    复制代码

     

    看最终效果图 

     

    现在我们的圣杯布局就OK啦!实现了我们要的效果,左右侧的盒子固定,中间盒子自适应,而且中间盒子的内容完全不受影响。希望对大家有帮助。

  • 相关阅读:
    django页面分类和继承
    django前端从数据库获取请求参数
    pycharm配置django工程
    django 应用各个py文件代码
    CF. 1428G2. Lucky Numbers(背包DP 二进制优化 贪心)
    HDU. 6566. The Hanged Man(树形背包DP DFS序 重链剖分)
    小米邀请赛 决赛. B. Rikka with Maximum Segment Sum(分治 决策单调性)
    区间树 学习笔记
    CF GYM. 102861M. Machine Gun(主席树)
    2016-2017 ACM-ICPC East Central North America Regional Contest (ECNA 2016) (B, D, G, H)
  • 原文地址:https://www.cnblogs.com/1723466522gx/p/11504679.html
Copyright © 2011-2022 走看看