在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？ 在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。 DOM结构：main内层增加了一个 ...
分类：
其他好文 时间：
2016-07-24 10:35:53
阅读次数：
125
圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇文章会讲到。 圣杯布局：用到浮动、负边距、相对定位，不添加额外标签 DOM结构： 样式： 左中右部分样式变化过程 1、中间部分需要根据浏 ...
分类：
其他好文 时间：
2016-07-24 10:26:27
阅读次数：
169
需要修改IE6下的bug，margin负值会在IE6下失效 ...
分类：
其他好文 时间：
2016-07-08 21:50:00
阅读次数：
179
圣杯布局和双飞翼布局网上有很多的文章来介绍。有的图文并茂的写的很细，看着很舒服。有的写的格式很乱，没图没真相，看着很捉急。然而这些文章里没有一篇是让自己看完后完全明白的，于是仔细了解了圣杯布局和双飞翼布局，下面对圣杯布局和双飞翼布局分别分解介绍一下，希望以后再看的时候能迅速帮助自己理解。 圣杯布局主 ...
分类：
Web程序 时间：
2016-07-06 11:52:53
阅读次数：
354
早两天写过一篇博讲到满屏布局和非满屏布局的情况，其中对于非满屏讲了一点点内容，这次讲下满屏布局的一些内容，就是圣杯布局。 这个网站就是使用了所谓的圣杯布局，它的特点就是网站左边的菜单栏是固定宽度的，而右边的内容区则是不固定宽度的，可以拉伸自适应的，由当前浏览器的宽度决定它的宽度。在网页的布局方法中， ...
分类：
其他好文 时间：
2016-05-15 15:14:41
阅读次数：
153
给三个div设置左浮动，因为父容器设置了padding值，中间main的宽度等于芙蓉区内容的宽度， 设置左右两侧的宽度为190px;父容器padding值为200px;设置190px;是为了方便查看显示效果： 左边设置margin-left:-100%;是为了让左侧栏移动到元素最左侧，右边设置mar ...
分类：
其他好文 时间：
2016-05-14 21:24:59
阅读次数：
142
为了实现经典的左右边列宽度一定，中间列宽度自适应，可以采用早期的圣杯布局，之后的改良效果为双飞翼布局，这里介绍了圣杯布局，并比较了圣杯布局与双飞翼布局之间的区别...
分类：
Web程序 时间：
2016-05-12 19:37:56
阅读次数：
358
× 目录 [1]float [2]absolute [3]flex[4]总结 前面的话 常常听说圣杯布局和双飞翼布局，以为是两个很高级的语汇。但实际上，他们只是三栏式布局的两种布局方法而已。本文将介绍三栏式布局的3种思路 思路一: float 【1】圣杯布局 圣杯布局使用float、负margin和 ...
分类：
其他好文 时间：
2016-05-05 07:04:36
阅读次数：
235
今天刷题的时候碰见了一道要求使用双飞翼布局的题。于是便对比了一下圣杯布局得到了点新认识。 我们都知道圣杯布局和双飞翼布局都实现了中间宽度自适应，两边定宽的效果。这样做的优势是重要的东西放在文档流前面可以优先渲染。两者又有什么差别呢？ 对比圣杯布局和双飞翼布局 1.二者都主要使用了浮动和负边距来达到中 ...
分类：
其他好文 时间：
2016-05-04 22:37:29
阅读次数：
147
