圣杯布局

布局要求：

三列布局，中间自适应，两边定宽

中间栏要在浏览器优先渲染

允许任意列的高度最高

用最简单的CSS、最少的HACK语句

解释说明：

1.min-width:700px是为了当页面缩小到指定的700px的时候，页面内容宽度不再随着浏览器缩小。是为了电脑的正常浏览效果

2.注意到container设置的值0 220px  0 200px,上 右 下 左，所以left 设置widh:200px,right设置width:220px

3.设置min-height:300px，是让三列看起来没那么的矮

4.浮动的情况下，定义负边距会使div向上移动，margin-left:-100%会使移动到最左则，然后再加上left：-200px，正好使left归位。right原理相同。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圣杯布局</title>

    <style type="text/css">

      *{

          margin: 0;

          padding: 0;

      }

      body{

          min-width: 700px;

      }

      .header,.footer{

       float: left;

       width: 100%;

       background: #f60;

       height: 40px;

       line-height: 40px;

       text-align: center;

      }

      .container{

          padding: 0 220px 0 200px;

      }

      .left,.middle,.right{

          position: relative;

          float: left;

          min-height: 300px;

      }

      .middle{

          width: 100%;

          background: #1a5acd;

      }

      .left{

          width: 200px;

          background: #f00;

          margin-left: -100%;

          left: -200px;

      }

      .right{

          width: 220px;

          background: #0f0;

          margin-left: -220px;

          right:-220px;

      }

    </style>

</head>

<body>

    <div class="header">

        <h4>头部</h4>

    </div>

    <div class="container">

        <div class="middle">

            <h4>middle</h4>

            <p>这是页面中间内容</p>

        </div>

        <div class="left">

            <h4>left</h4>

            <p>这是页面左侧内容</p>

        </div>

        <div class="right">

            <h4>right</h4>

            <p>这是页面右面的内容</p>

        </div>

    </div>

    <div class="footer">

        <h4>尾部</h4>

    </div>

</body>

</html>

双飞翼布局：

经过淘宝工程师针对圣杯布局改良后得出双飞翼布局

去掉相对布局，只需要浮动和负边距

解释说明：双飞翼布局得到的效果试图与圣杯布局一样，只不过是写法不太一样，主要是没有用container包括中间三部分，相对定位也没用到

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>双飞翼布局</title>

    <style type="text/css">

    *{

        margin:0;

        padding:0;

    }

    body{

        min-width:700px;

    }

    .header,.footer{

        width: 100%;

        float: left;

        height: 40px;

        background: #ddd;

        text-align: center;

        line-height: 40px;

    }

    .left,.right,.middle{

        float: left;

        min-height: 300px;

    }

    .middle{

        width: 100%;

        min-height:300px;

    }

    .middle-inner{

        margin-left: 200px;

        margin-right: 220px;

        background: red;

        min-height:300px; 

    }

    .left{

        width: 200px;

        background: #0F0;

        margin-left: -100%;

    }

    .right{

        width: 220px;

        background: blue;

        margin-left: -220px;

    }

    </style>

</head>

<body>

    <div class="header">

        <h4>头部</h4>

    </div>

        <div class="middle">

           <div class="middle-inner">

            <h4>middle</h4>

            <p>这是页面中间内容</p>

           </div>

        </div>

        <div class="left">

            <h4>left</h4>

            <p>这是页面左侧内容</p>

        </div>

        <div class="right">

            <h4>right</h4>

            <p>这是页面右面内容</p>

        </div>

    <div class="footer">

        <h4>尾部</h4>

    </div>

</body>

</html>

css中的圣杯布局和双飞翼布局的更多相关文章

  1. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  2. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  3. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  4. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  5. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

  6. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  7. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  8. CSS经典布局——圣杯布局与双飞翼布局

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  9. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  10. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

随机推荐

  1. WPF中使用TextBlock的Inlines属性来完成复杂的文字内容

    参考:http://blog.csdn.net/zhangjiyehandsom/article/details/5498845 1. 需求:要在一行内容中显示不同颜色以及粗细不一的字体, 解决办法: ...

  2. tomcat+nginx+redis集群搭建并解决session共享问题。

    1 集群搭建 https://www.cnblogs.com/yjq520/p/7685941.html 2 session共享 https://blog.csdn.net/tuesdayma/art ...

  3. IDEA 启动项目，tomcat中配置的虚拟路径无法使用

    有时候,使用idea启动项目,非动静分离项目,直接根据图片url地址显示图片,会发现图片无法显示,tomcat中配置的虚拟路径无法使用,这时候需要配置idea.选择路径,然后给与一个访问名就行了.

  4. python实例：快速找出多个字典中的公共键

    1.生成随机字典 # 从abcdefg 中随机取出 3-6个,作为key, 1-4 的随机数作为 value s1 = {x : randint(1, 4) for x in sample('abcd ...

  5. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  6. WebStorm配置Node.js IDE

    开始刚学的时候一直用命令行来运行Node.js,网上找了些配置Node.js IDE配置的贴子,说WebStorm配置IDE最简单,自己就试了下. 1.首先安装Node这步就不说了 2.下载WebSt ...

  7. 玩转树莓派《三》——Scratch

    今天大姨妈折磨了一整个白天,稍微好点,现在打开实验楼,看到有个朋友回答了关于ubuntu上面操作SQL 的时候到处数据到txt文件,被批评没有思考问题,或许吧,虽然那个权限我现在想起确实是可读可写的, ...

  8. Java如何操作对象（bean）进行动态排序？

    原文出自:https://blog.csdn.net/seesun2012 简介如题:Java如何操作对象(bean)进行动态排序?Java实体类(bean)动态排序? 原理:利用反射根据指定的属性值 ...

  9. nodejs添加jsonwebtoken验证

    具体使用模块: 使用compression压缩处理请求响应.cors模块添加跨域.helmet安全模块.body-parser解析请求参数.jsonwebtoken用于生成及校验token.使用内置c ...

  10. java自学-编程入门

    java语言写的代码需要先编译为可执行文件,才能被jvm执行.在下载的jdk安装目录下的bin目录,有两个可执行程序java.exe和javac.exe,javac就是用来编译的,java是执行编译后 ...