圣杯布局

布局要求：

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

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

允许任意列的高度最高

用最简单的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. Chapter 7. Packages

    Chapter 7. Packages The hierarchical naming structure for packages is intended to be convenient for ...

  2. struts2 servlet之间通信

    Servlet之间通信的方式有两大类,每个类有三种不同的方法 1.request 2.session 3.application 不实现ServletContextAware,SessionAware ...

  3. System.Transactions事务超时设置

    System.Transactions 有2个超时属性(timeout 与 maxTimeout),可以通过配置文件来进行设置. 1. timeout System.Transactions 默认的t ...

  4. 为什么在大多数OS中都引入”打开“这一文件系统调用？打开的含义是什么？

    当用户要求对一个文件实施多次读/写或者其他操作时,每次都要从检索目录开始.为了避免多次重复检索目录,在大多数OS中都引入了”打开“这一文件系统调用,当用户第一次请求对某文件进行操作时,须先利用open ...

  5. UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题

    转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题 看网上有人写通过判断docume ...

  6. 【13】MD5编码、Zlib压缩解压缩

    1.MD5加密 /// <summary> /// 使用MD5加密算法 /// </summary> /// <param name="md5MessageSt ...

  7. WPF实现夜间模式

    背景 项目中设计了一个黑色主题,稍加改正也可作为夜间模式,效果图如下: 原理 由于项目中存在地图,而地图完全是由位图组成,不能直接改变背景色,所以我在内容上面放置了一个黑色的Border作为遮罩.可通 ...

  8. 几个css3动画库

    Hover.css 查看演示: http://ianlunn.github.io/Hover/ github地址: https://github.com/IanLunn/Hover Animate.c ...

  9. HTML是什么与基础格式

    html 又称 超文本标记语言. 网页的本质其实就是html代码,通过浏览器,将html转换翻译成用户可以看得懂的展现丰富的页面. 所以制作网站的本质,其实就是编写html代码. HTML基础格式 & ...

  10. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...