搜索
首页web前端html教程CSS布局 圣杯布局 & 双飞翼布局_html/css_WEB-ITnose

按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。

但在这里实现起来还是有一些区别的

 

【圣杯布局】

在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致。

DEMO

稍微说明一下:

html代码中  middle部分首先要放在container的最前部分。然后是left,right

1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到)

2.middle部分 width:100%占满

3.此时middle占满了,所以要把left拉到最左边,使用margin-left:-100%

4.这时left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,所以在外围container加上 padding:0 220px 0 200px

5.middle内容拉回来了,但left也跟着过来了,所以要还原,就对left使用相对定位 left:-200px  同理,right也要相对定位还原 right:-220px

6.到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px

不过衰衰地发现ie中有问题.. ie6/7/8/9中 下面的空白高度都不一样..

当然,为了保证窗口不能缩太小无法展示左右,可以给body加上 min-width

好了,代码敬上:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>圣杯布局</title><style type="text/css">    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .left,    .middle,    .right{         position: relative;        float: left;        min-height: 130px;    }    .container{        padding:0 220px 0 200px;        overflow: hidden;    }    .left{        margin-left: -100%;        left: -200px;        width: 200px;        background: red;    }    .right{        margin-left: -220px;        right: -220px;        width: 220px;        background: green;    }    .middle{         width: 100%;        background: blue;        word-break: break-all;    }    .footer{         clear: both;    }</style></head><body><div class="header">    <h4 id="header">header</h4></div><div class="container">    <div class="middle">        <h4 id="middle">middle</h4>        <p>HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>    </div>    <div class="left">    <h4 id="left">left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4 id="right">right</h4>        <p>BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888</p>    </div>    </div>    <div class="footer">        <h4 id="footer">footer</h4>    </div></body></html>

 

 

【双飞翼布局】

DEMO

听说双飞翼布局是玉伯大大提出来的,始于淘宝UED

如果把三栏布局比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.

其实跟上边的圣杯布局差不多的,当然也可以改动一下(自己想想有哪些不同吧)

恩,这里有一只鸟~

左翅sub有200px,右翅extra..220px.. 身体main自适应未知

1.html代码中,main要放最前边,sub  extra

2.将main  sub  extra 都float:left

3.将main占满 width:100%

4.此时main占满了,所以要把sub拉到最左边,使用margin-left:-100%  同理 extra使用margin-left:-220px

(这时可以直接继续上边圣杯布局的步骤,也可以有所改动)

5.main内容被覆盖了吧,除了使用外围的padding,还可以考虑使用margin。

给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px

6.main正确展示

代码敬上:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>双飞翼布局</title><style type="text/css">    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .sub,    .main,    .extra{         float: left;        min-height: 130px;    }    .sub{        margin-left: -100%;        width: 200px;        background: red;    }    .extra{        margin-left: -220px;        width: 220px;        background: blue;    }    .main{         width: 100%;    }    .main-inner{         margin-left: 200px;        margin-right: 220px;        min-height: 130px;        background: green;        word-break: break-all;    }    .footer{         clear: both;    }</style></head><body><div class="header">    <h4 id="header">header</h4></div>    <div class="main">    <div class="main-inner">        <h4 id="main">main</h4>        <p>HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>        </div>    </div>     <div class="sub">    <h4 id="sub">sub</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>      <div class="extra">    <h4 id="extra">extra</h4>        <p>BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888</p>    </div>    <div class="footer">        <h4 id="footer">footer</h4>    </div></body></html>

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

视口元标签是什么?为什么对响应式设计很重要?视口元标签是什么?为什么对响应式设计很重要?Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能