1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <title>圣杯布局</title>
  7.  
  8.     <style type="text/css">
  9.     body {background-color: #ffffff; font-size:14px;}
  10.     #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
  11.     .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
  12.     .main {background-color: #03a9f4; color:#ffffff;}
  13.     .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
  14.     p {margin:0; padding:20px; text-align: center;}
  15.  
  16.     /* 左侧栏固定宽度，右侧自适应 */
  17.     .bd-lft {
  18.         zoom:1;
  19.         overflow:hidden;
  20.         padding-left:210px;
  21.     }
  22.     .bd-lft .aside {
  23.         float:left;
  24.         width:200px;
  25.         margin-left:-100%; /*= -100%*/
  26.  
  27.         position:relative;
  28.         left:-210px; /* = -parantNode.paddingLeft */
  29.         _left: 0; /*IE6 hack*/
  30.     }
  31.     .bd-lft .main {
  32.         float:left;
  33.         width:100%;
  34.     }
  35.  
  36.     /* 右侧栏固定宽度，左侧自适应 */
  37.     .bd-rgt {
  38.         zoom:1;
  39.         overflow:hidden;
  40.         padding-right:210px;
  41.     }
  42.     .bd-rgt .aside {
  43.         float:left;
  44.         width:200px;
  45.         margin-left:-200px; /* = -this.width */
  46.  
  47.         position:relative;
  48.         right:-210px; /* = -parantNode.paddingRight */
  49.     }
  50.     .bd-rgt .main {
  51.         float:left;
  52.         width:100%;
  53.     }
  54.  
  55.     /* 左中右 三栏自适应 */
  56.     .bd-3-lr {
  57.         zoom:1;
  58.         overflow:hidden;
  59.         padding-left:210px;
  60.         padding-right:210px;
  61.     }
  62.     .bd-3-lr .main {
  63.         float:left;
  64.         width:100%;
  65.     }
  66.     .bd-3-lr .aside-1 {
  67.         float: left;
  68.         width:200px;
  69.         margin-left: -100%;
  70.  
  71.         position:relative;
  72.         left: -210px;
  73.         _left: 210px; /*IE6 hack*/
  74.     }
  75.     .bd-3-lr .aside-2 {
  76.         float: left;
  77.         width:200px;
  78.         margin-left: -200px;
  79.  
  80.         position:relative;
  81.         right: -210px;
  82.     }
  83.  
  84.     /* 都在左边，右侧自适应 */
  85.     .bd-3-ll {
  86.         zoom:1;
  87.         overflow:hidden;
  88.         padding-left:420px;
  89.     }
  90.     .bd-3-ll .main {
  91.         float:left;
  92.         width:100%;
  93.     }
  94.     .bd-3-ll .aside-1 {
  95.         float: left;
  96.         width:200px;
  97.         margin-left: -100%;
  98.  
  99.         position:relative;
  100.         left: -420px;
  101.         _left: 0px; /*IE6 hack*/
  102.     }
  103.     .bd-3-ll .aside-2 {
  104.         float: left;
  105.         width:200px;
  106.         margin-left: -100%;
  107.  
  108.         position:relative;
  109.         left: -210px;
  110.         _left: 210px; /*IE6 hack*/
  111.     }
  112.  
  113.     /* 都在右边，左侧自适应 */
  114.     .bd-3-rr {
  115.         zoom:1;
  116.         overflow:hidden;
  117.         padding-right:420px;
  118.     }
  119.     .bd-3-rr .main {
  120.         float:left;
  121.         width:100%;
  122.     }
  123.     .bd-3-rr .aside-1 {
  124.         float: left;
  125.         width:200px;
  126.         margin-left: -200px;
  127.  
  128.         position:relative;
  129.         right: -210px;
  130.     }
  131.     .bd-3-rr .aside-2 {
  132.         float: left;
  133.         width:200px;
  134.         margin-left: -200px;
  135.  
  136.         position:relative;
  137.         right: -420px;
  138.     }
  139.  
  140.     </style>
  141.  
  142. </head>
  143. <body>
  144.  
  145.     <div id="hd">头部</div>
  146.  
  147.     <div class="bd-lft">
  148.         <div class="main">
  149.             <p>主内容栏自适应宽度</p>
  150.         </div>
  151.  
  152.         <div class="aside">
  153.             <p>侧边栏固定宽度</p>
  154.         </div>
  155.     </div>
  156.  
  157.     <div class="bd-rgt">
  158.         <div class="main">
  159.             <p>主内容栏自适应宽度</p>
  160.         </div>
  161.  
  162.         <div class="aside">
  163.             <p>侧边栏固定宽度</p>
  164.         </div>
  165.     </div>
  166.  
  167.     <div class="bd-3-lr">
  168.         <div class="main">
  169.             <p>主内容栏自适应宽度</p>
  170.         </div>
  171.  
  172.         <div class="aside-1">
  173.             <p>侧边栏1固定宽度</p>
  174.         </div>
  175.  
  176.         <div class="aside-2">
  177.             <p>侧边栏2固定宽度</p>
  178.         </div>
  179.     </div>
  180.  
  181.     <div class="bd-3-ll">
  182.         <div class="main">
  183.             <p>主内容栏自适应宽度</p>
  184.         </div>
  185.  
  186.         <div class="aside-1">
  187.             <p>侧边栏1固定宽度</p>
  188.         </div>
  189.  
  190.         <div class="aside-2">
  191.             <p>侧边栏2固定宽度</p>
  192.         </div>
  193.     </div>
  194.  
  195.     <div class="bd-3-rr">
  196.         <div class="main">
  197.             <p>主内容栏自适应宽度</p>
  198.         </div>
  199.  
  200.         <div class="aside-1">
  201.             <p>侧边栏1固定宽度</p>
  202.         </div>
  203.  
  204.         <div class="aside-2">
  205.             <p>侧边栏2固定宽度</p>
  206.         </div>
  207.     </div>
  208.  
  209.     <div id="ft">底部</div>
  210.  
  211. </body>
  212. </html>

CSS布局方案之圣杯布局的更多相关文章

  1. css实现三栏水平布局双飞翼与圣杯布局

    作为布局的入门级选手,网上也查看了很多信息和资源 双飞翼的html结构 <div class="container"> <div class="main ...

  2. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  3. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  4. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

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

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

  6. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

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

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

  8. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

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

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

随机推荐

  1. 海量路由表能够使用HASH表存储吗-HASH查找和TRIE树查找

    千万别! 非常多人这样说,也包括我. Linux内核早就把HASH路由表去掉了.如今就仅仅剩下TRIE了,只是我还是希望就这两种数据结构展开一些形而上的讨论. 1.hash和trie/radix ha ...

  2. ECMAScript 6新特性介绍

    箭头函数 箭头函数使用=>语法来简化函数.在语句结构上和C#.Java 8 和 CoffeeScript相似,支持表达式和函数体. . =>`操作符左边为输入的參数.而右边则是进行的操作以 ...

  3. Linux各个目录的作用

      /binbin是binary的缩写.这个目录沿袭了UNIX系统的结构,存放着使用者最经常使用的命令.例如cp.ls.cat,等等./boot这里存放的是启动Linux时使用的一些核心文件./dev ...

  4. nopCommerce架构分析系列（二）数据Cache

    原文(http://www.cnblogs.com/gusixing/archive/2012/04/12/2443799.html)非常感谢作者顾思行的分享! 序言 在很多访问量较大的系统中,尤其在 ...

  5. 我对 javascript 闭包的理解

    学js的学到闭包,但是理解不深. 后来看了一下这篇文章: 地址:http://leepiao.blog.163.com/blog/static/4850313020112835355917/ 内容如下 ...

  6. c# 调用 友盟api

    今天要使用友盟的推送API来给我的app进行推送信息,调试了好久,老是返回500错误,最终在友盟的技术人员支持下完成了此操作,在此多谢友盟技术和客服人员. 把发方法和注意事项贴出来供大家参考. pub ...

  7. .Net Memory -- GC基本知识

    参考资料: http://blogs.msdn.com/b/tess/archive/2008/04/17/how-does-the-gc-work-and-what-are-the-sizes-of ...

  8. POJ 1269 - Intersecting Lines 直线与直线相交

    题意:    判断直线间位置关系: 相交,平行,重合 include <iostream> #include <cstdio> using namespace std; str ...

  9. codeforces 22C System Administrator(构造水题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud System Administrator Bob got a job as a s ...

  10. Eclipse控制台显示Tomcat日志

    今天看一篇学习Struts的博文,文章里面提到从生成的日志,结果,怎么鼓捣都看不到.心情也跟着烦躁了.于是晚饭后出去散步,冷静一下,然后决定晚上一定搞掂这个问题.这不,搞掂了,写篇博文记录一下. St ...