HTML布局篇之双飞翼（圣杯）布局

【HTML布局篇之双飞翼（圣杯）布局】的更多相关文章

HTML布局篇之双飞翼（圣杯）布局

最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼)布局 margin 定位布局 position 本次重点讲解双飞翼布局双飞翼布局源于国外的圣杯布局,经过淘宝UED(玉伯)优化后成为了现在的双飞翼布局,是经典的三栏式布局的解决方案.优点先不说,先看看什么是双飞翼布局. 我们在利用float布三列式的页面时,一般的布局思路是…

css3布局篇（双飞翼）

大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有以下的几点: 1.三列布局,中间宽度就自适应,目的都是左右两栏固定宽度: 2.在执行代码时候,代码是从上往下执行的.中间栏要在浏览器中优先展示渲染.中间往往是大家最关注的点. 3.允许任意列的高度最高:4.要求只用一个额外的DIV标签: 参考代码: <!DOCTYPE html> &l…

CSS3布局篇（多列布局）

我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_columns.asp 如下多列属性: column-count:规定元素应该被分隔的列数.column-gap:规定列之间的间隔.column-rule:设置所有 column-rule-* 属性的简写属性. 参考代码: <!DOCTYPE html> <html> <head>…

CSS 之圣杯布局&双飞翼布局

圣杯布局和双飞翼布局是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应中间部分在DOM结构上优先,以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的<div>标签圣杯布局 1.结构: <div id="header"></div> <div id="container"> <div id="c…

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

在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己孤陋寡闻了,以前在看资料的时候无意中看过圣杯布局和双飞翼布局这样的名词,只不过当时基础是在太差直接忽略了(当然现在也是在打基础,但是好歹相对几个月前已经有了质的改变).今天总结时再次看到这两个布局方法,当然再也不能错过了. 圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象…

css3布局-圣杯布局

圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局圣杯布局为了中间div内容不被别的内容覆盖,将中间div设置了左右的内边距后,将左右两个div用相对布局position: relative并给两侧的div添加right和left属性,以便左右两栏div移动后不内容不覆盖中间div. 圣杯布局的特点(两端固定中间自适应),也就是说两端的内容不会因为浏览器宽度的改变使其内容改变 <!DOCTYPE html> <html> <head> <meta ch…

CSS3与页面布局学习总结——多种页面布局

一.负边距与浮动布局 1.1.负边距所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见用法如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: 示例代码: <!DOCTYPE html> <html> <he…

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

圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物"的意思,不是一种对页面的形象表达.双飞翼据考源自淘宝UED,应该是一种页面的形象的表达. 圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负…

CSS_圣杯布局和双飞翼布局

参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http://www.imooc.com/wenda/detail/254035 博客:http://www.cnblogs.com/imwtr/p/4441741.html 理解: 圣杯布局和双飞翼布局均可以实现一个三栏布局:中间栏先加载,然后是左栏,右栏:左右两栏宽度固定,中间栏宽度自适应(会根据浏览器的…

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

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致. DEMO 稍微说明一下: html代码中 middle部分首先要放在container的最前部分.然后是left,right 1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到) 2.mid…