css中双飞翼布局和圣杯布局的示例分析-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

css中双飞翼布局和圣杯布局的示例分析

这篇文章主要为大家展示了“css中双飞翼布局和圣杯布局的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中双飞翼布局和圣杯布局的示例分析”这篇文章吧。

成都创新互联公司主营惠水网站建设的网络公司,主营网站建设方案,app软件开发公司,惠水h5小程序开发搭建,惠水网站营销推广欢迎惠水等地区企业咨询

1、圣杯布局

浮动、负边距、相对定位、不添加额外标签

效果图

css中双飞翼布局和圣杯布局的示例分析

DOM结构：

Header

Main

Left

Right

Footer

样式：

左中右部分样式变化过程

1、中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设*左中右向左浮动，因为中间100%，左层和右层根本没有位置上去

  .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }

css中双飞翼布局和圣杯布局的示例分析

2、把左层负margin150后，发现left上去了，因为负到出窗口没位置了，只能往上挪

.left{ 
   background: #E79F6D; 
   width:150px; 
   float:left; 
   margin-left:-150px; 
}

css中双飞翼布局和圣杯布局的示例分析

3、那么按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
}
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
}

css中双飞翼布局和圣杯布局的示例分析

4、然而问题来了，中间被左右挡住了啊，只好给外层加padding了

.bd{ 
  padding-left:150px; 
  padding-right:190px;
}

css中双飞翼布局和圣杯布局的示例分析

5、但是加了之后左右栏也缩进来了，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
  position: relative; 
  left:-150px; 
} 
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
  position:relative; 
  right:-190px; 
}

css中双飞翼布局和圣杯布局的示例分析

2、双飞翼布局

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？

在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。

DOM结构：main内层增加了一个div

Header

Main

body{ padding:0; margin:0 } .header,.footer{ width:100%; background:#666; height:30px;clear:both; } .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; /*position: relative;*/ /*left:-150px;*/ } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; /*position:relative;*/ /*right:-190px;*/ } .inner{ margin-left:150px; margin-right:190px; }

新闻中心

其他资讯