您现在的位置是：网站首页> 编程资料编程资料

CSS的三列式"圣杯布局"方案完全解析浅谈css双飞翼布局和圣杯布局CSS布局之圣杯布局与双飞翼布局 面试必问:圣杯布局和双飞翼布局的区别

2021-09-05 1354人已围观

简介 圣杯布局效果优美且对浏览器兼容性要求非常低,是一种非常给力的三列式页面布局方案,接下来就来看看对CSS的三列式"圣杯布局"方案完全解析:

圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM结构如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.     <div class="main">div>  
  3.  <div class="sub">div>  
  4.  <div class="extra">div>  
  5. div>  

流程解说
接下来，让我们一步一步地实现圣杯布局；

1、 首先分别浮动main、sub、extra三列， 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：

CSS Code复制内容到剪贴板
  1. .main {   
  2.  float: left;   
  3.  width: 100%;   
  4.  height: 300px;   
  5.  background-color: rgba(255, 0, 0, .5);   
  6. }   
  7. .sub {   
  8.  float: left;   
  9.  width: 200px;   
  10.  height: 300px;   
  11.  margin-left: -100%;   
  12.  background-color: rgba(0, 255, 0, .5);   
  13. }   
  14. .extra {   
  15.  float: left;   
  16.  width: 180px;   
  17.  height: 300px;   
  18.  margin-left: -180px;   
  19.  background-color: rgba(0, 0, 255, .5);   
  20. }  

2、 完成上步后，sub和extra列已经到了正确的位置，但是sub和extra列却覆盖了main的两边，对于这个问题，圣杯布局的解决办法是给容器container添加左、右内边距，从而让main列定位到正确的位置。

CSS Code复制内容到剪贴板
  1. .container {   
  2.  padding-left: 210px;   
  3.  padding-right: 190px;   
  4. }  

3、 完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：

CSS Code复制内容到剪贴板
  1. .sub {   
  2.  position: relative;   
  3.  left: -210px;   
  4. }   
  5. .extra {   
  6.  position: relative;   
  7.  rightright: -190px;   
  8. }  

4、 当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：

CSS Code复制内容到剪贴板
  1. body {   
  2.  min-width: 600px; /* 2*sub + extra */  
  3. }   
  4. .container {   
  5.  padding-left: 210px;   
  6.  padding-right: 190px;   
  7. }   
  8. .main {   
  9.  float: left;   
  10.  width: 100%;   
  11.  height: 300px;   
  12.  background-color: rgba(255, 0, 0, .5);   
  13. }   
  14. .sub {   
  15.  position: relative;   
  16.  left: -210px;   
  17.  float: left;   
  18.  width: 200px;   
  19.  height: 300px;   
  20.  margin-left: -100%;   
  21.  background-color: rgba(0, 255, 0, .5);   
  22. }   
  23. .extra {   
  24.  position: relative;   
  25.  rightright: -190px;   
  26.  float: left;   
  27.  width: 180px;   
  28.  height: 300px;   
  29.  margin-left: -180px;   
  30.  background-color: rgba(0, 0, 255, .5);   
  31. }  

点击查看在线demo

完整实例
效果如下：
201662115852310.png (900×465)

CSS 和 DOM 代码如下：

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.     "utf-8">   
  5.     "X-UA-Compatible" content="IE=edge,chrome=1">   
  6.     圣杯布局   
  7.   
  8.     "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.     /* 左侧栏固定宽度，右侧自适应 */  
  18.     .bd-lft {   
  19.         zoom:1;   
  20.         overflow:hidden;   
  21.         padding-left:210px;   
  22.     }   
  23.     .bd-lft .aside {   
  24.         float:left;   
  25.         width:200px;   
  26.         margin-left:-100%; /*= -100%*/  
  27.   
  28.         position:relative;   
  29.         left:-210px; /* = -parantNode.paddingLeft */  提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：网站设计之合理架构CSS网站设计效果体验 之七种不同的色系电子商务网站设计分析六：商品详情页设计使用这5个网站设计的技巧，可以让你的销售额增加300%如何做一个适合自己品牌的酒店网站？19个美丽的度假酒店网站设计欣赏网站设计分析：模块化--高效重构如何为网站设计出色的横幅 为网站设计出色横幅的方法关于网站设计中网页情景化设计的方法介绍(图)网站设计之第一印象 注意用户体验浅谈合理架构CSS我的css架构理念—因人而异 没有最优 只有适合

    下一篇：CSS Web安全字体组合详解移动端Web页面的CSS3 flex布局快速上手指南详解CSS制作Web页面条纹背景样式的技巧像素密度与CSS3的viewport在移动端Web响应式布局中的运用推荐WEB开发者最佳HTML5和CSS3代码生成器CSS实现带倒三角标记的WEB标准菜单效果代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网