1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）

  1. !DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.  
  7.         <style type="text/css">
  8.             *{
  9.                 margin: ;
  10.                 padding: ;
  11.             }
  12.             body{
  13.                 min-width: 600px;
  14.             }
  15.             #content{
  16.                 padding: 0 200px;
  17.             }
  18.             #header,#footer{
  19.                 height: 20px;
  20.                 text-align: center;
  21.                 border: 1px solid  deeppink;
  22.                 background: gray;
  23.             }
  24.             #content .middle{
  25.                 float: left;
  26.                 width: %;
  27.                 background: pink;
  28.                 /*padding: 0 200px;*/
  29.             }
  30.             #content .left{
  31.                 position: relative;
  32.                 left: -200px;
  33.                 margin-left: -%;
  34.                 float: left;
  35.                 width: 200px;
  36.                 background: yellow;
  37.             }
  38.             #content .right{
  39.                 position: relative;
  40.                 right: -200px;
  41.                 margin-left: -200px;
  42.                 float: left;
  43.                 width: 200px;
  44.                 background: yellow;
  45.             }
  46.  
  47.             .clearfix{
  48.                 *zoom: ;
  49.             }
  50.             .clearfix:after{
  51.                 content: "";
  52.                 display: block;
  53.                 clear: both;
  54.             }
  55.         </style>
  56.     </head>
  57.     <body>
  58.         <div id="header">header</div>
  59.         <div id="content" class="clearfix">
  60.             <div class="middle">
  61.                 <h4>middle</h4>
  62.                 <!--<h4>middle</h4>
  63.                 <h4>middle</h4>
  64.                 <h4>middle</h4>
  65.                 <h4>middle</h4>
  66.                 <h4>middle</h4>
  67.                 <h4>middle</h4>
  68.                 <h4>middle</h4>
  69.                 <h4>middle</h4>
  70.                 <h4>middle</h4>
  71.                 <h4>middle</h4>
  72.                 <h4>middle</h4>
  73.                 <h4>middle</h4>
  74.                 <h4>middle</h4>
  75.                 <h4>middle</h4>
  76.                 <h4>middle</h4>
  77.                 <h4>middle</h4>
  78.                 <h4>middle</h4>
  79.                 <h4>middle</h4>
  80.                 <h4>middle</h4>
  81.                 <h4>middle</h4>
  82.                 <h4>middle</h4>-->
  83.             </div>
  84.             <div class="left">left</div>
  85.             <div class="right">right</div>
  86.         </div>
  87.         <div id="footer">footer</div>
  88.     </body>
  89. </html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

中间加入无限增高

<!--
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
-->

<!--
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）
-->

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>圣杯布局</title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin:;
  9.                 padding:;
  10.             }
  11.  
  12.           body{
  13.               min-width:600px;
  14.           }
  15.           #content{
  16.               overflow: hidden;
  17.               padding:  200px;
  18.  
  19.           }
  20.           #header, #footer{
  21.  
  22.               height: 20px;
  23.               text-align: center;
  24.               border: 1px solid deeppink;
  25.               background: gray;
  26.           }
  27.           #content .middle, #content .left, #content .right{
  28.  
  29.               padding-bottom: 10000px;
  30.               margin-bottom:-10000px;
  31.           }
  32.             #content .middle{
  33.                 float: left;
  34.                 width: %;
  35.                 background: pink;
  36.                 /*padding: 0 200px;*/
  37.             }
  38.             #content .left{
  39.  
  40.                 background: yellow;
  41.                position: relative;
  42.                 float: left;
  43.                 width: 200px;
  44.                 /*100%提升一层*/
  45.                 margin-left: -%;
  46.                 /*根据父级左右padding 200px; 让他据左边 */
  47.                 left:-200px;
  48.             }
  49.             #content .right
  50.             {
  51.                 background:yellow;
  52.                 position: relative;
  53.                 float: left;
  54.                 width:200px;
  55.                 /*-200px提升一层*/
  56.                 margin-left: -200px;
  57.                 right: -200px;
  58.             }
  59.  
  60.             .clearfix{
  61.                 zoom: ;
  62.             }
  63.            .clearfix:after{
  64.                content:"";
  65.                display: block;
  66.                clear:both;
  67.            }
  68.  
  69.         </style>
  70.     </head>
  71.     <body>
  72.         <div id="header">header</div>
  73.         <div id="content" class="clearfix">
  74.             <div class="middle">
  75.                 <h4>middle</h4>
  76.                 <h4>middle</h4>
  77.                 <h4>middle</h4>
  78.                 <h4>middle</h4>
  79.                 <h4>middle</h4>
  80.                 <h4>middle</h4>
  81.                 <h4>middle</h4>
  82.                 <h4>middle</h4>
  83.             </div>
  84.             <div class="left">left</div>
  85.             <div class="right">right</div>
  86.         </div>
  87.         <div id="footer">footer</div>
  88.     </body>
  89. </html>

html-圣杯布局的更多相关文章

  1. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

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

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

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

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

  4. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

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

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

  6. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. 前端css：“圣杯布局”

    昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...

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

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

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  10. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

随机推荐

  1. NX二次开发-比较两个string是否相等

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> UF_initialize(); string A = "ABC&quo ...

  2. [JZOJ 5818] 做运动

    题意:带温度最短路. 思路: 我们将温度从小到大的将边加入,用并查集维护连通性. 如果一旦联通那么跑一遍\(spfa\)就可以得到答案. 复杂度\(O(m log m)\) #include < ...

  3. P1655 小朋友的球

    P1655 小朋友的球 题目描述 @发源于 小朋友最近特别喜欢球.有一天他脑子抽了,从口袋里拿出了N个不同的球,想把它们放到M个相同的盒子里,并且要求每个盒子中至少要有一个球,他好奇有几种放法,于是尝 ...

  4. VScode中写vue代码 Ctrl+/添加注释失效

    1.点击列表的文件——>首选项——>键盘快捷方式,在里面查看 Ctrl+/ 是否有冲突 2.查看右下角的选择语言模式是否是Vue,如下图

  5. 洛谷P3959——宝藏

    传送门:QAQQAQ 题意: 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了$n$个深埋在地下的宝藏屋, 也给出了这$n$个宝藏屋之间可供开发的$m$条道路和它们的长度. 小明决心亲自前往挖掘所有 ...

  6. 拾遗：sed&vim

    一.sed查漏补缺 1.sed x,+y,从第x行的开始,向下连续y行(包含x行在内是y+1行!) f@z ~/testdir $ cat -n x.awk #!/usr/bin/awk -f BEG ...

  7. centOs 查看系统cpu使用率等--top

    原文:centOs 查看系统cpu使用率等--top 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CP ...

  8. [转载]HTTPS的工作原理

    HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息.TLS/SSL协议不仅仅是一套加密传输的协议,更是一件经过艺术家精心设计的艺 ...

  9. vue 挂载点 实例 模板

    挂载点:vue实例 里面的el属性 对应的 id 所在的dom节点 模板:指的是挂载点内部的内容           模板可以写在挂载点内部           也可以写在属性里面 demo < ...

  10. js 高级 原型与原型链

    * 所有函数都有一个特别的属性: * `prototype` : 显式原型属性* 所有实例对象都有一个特别的属性: * `__proto__` : 隐式原型属性 1.  每个函数都有一个prototy ...