【html--双飞翼布局】的更多相关文章

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

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

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

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

css双飞翼布局

 双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而left与right就是鸟的"翼"了,鸟想要平衡地飞翔就要把主体位置给摆正确,然后在"翼"的作用下开始起飞.布局也是一样的,我们也要先把主体给摆好,然后再合理地调整双翼,这样整体动作才会比较和谐. 双飞翼布局的效果图如下所示: HTML代码如下所示: <div clas…

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

圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title></title>    <link rel="stylesheet"…

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

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

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

一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局相关的点整理了一下,前后捋顺,遂有了如下的文章. 为了满足页面多列布局的需要,早期人们多用table布局,但渐渐人们发现这种布局的劣势,就是要等页面加载完才能渲染,而且table写起来代码较大,样式也不要控制,于是人们寻求CSS+HTML的方式(但也不能说table就弃用了,在展现表格的时候tabl…

HTML特殊布局--------双飞翼布局

今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100%的宽 float:left: 两边的盒子都float:left,定固定的宽:左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽: 以下是例子:  <div class="box"/>          <div class=&q…

CSS（五）圣杯，双飞翼布局

双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; float: left; } .content{ padding: 0 200px; } .left{ height: 200px; width: 200px; background: blue; float: left; margin-left: -100%; } .right{ width: 200px; he…

css居中方法与双飞翼布局

居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的参考脱离文档流 3-1.设置相对偏移量50% 3-2.使用平移设置水平偏移量适当修改 3-3.此属性是当对于子元素位置平移,括号值正值向右平移,负值向左平移 水 平 margin: 0 auto ; display: inline-block; text-align: center; position: r…

css布局-双飞翼布局

<div class="header">Header</div> <div class="bd"> <div class="main"> <div class="inner"> Main </div> </div> <div class="left">Left</div> <div class=…