做网站第一步网站建设、百度推广

当前位置： 首页 > news >正文

做网站第一步,网站建设、百度推广,自我介绍网页模板代码,wordpress 反向代理 配置前沿简介 圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同#xff0c;都是为了实现一个两侧宽度固定#xff0c;中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。 两者的实现方式有差异#xff0c;但是都…前沿简介 圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同都是为了实现一个两侧宽度固定中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。 两者的实现方式有差异但是都遵循以下几点 两侧宽度固定中间宽度自适应中间部分在DOM结构上优先以便先行渲染允许三列中的任意一列称为最高列只需要使用一个额外的div标签 圣杯布局 DOM结构 div idheader/div div idcontainerdiv idcenter classcolumn/divdiv idleft classcolumn/divdiv idright classcolumn/div /div div idfooter/div主体由container包裹center、left、right三部分其中的center在最前面优先渲染。 CSS代码 假设左侧固定宽度200px,右侧固定宽度150px在container上设置如下样式: #container {padding-left: 200px;padding-right: 150px; }目的就是给左侧以及右侧预留出空间得到如下示意图
随后为左中右三列设置浮动与对应的宽度同时为底部footer设置清除浮动。 #container .column {float: left; }#center {width: 100%; }#left {width: 200px; }#right {width: 150px; }#footer {clear: both; }得到如下示意图效果
由于center设置了宽度100%所有左侧left跟右侧right被挤到了第二行。 如果要把left放到预留的位置那么需要使用负外边距,代码如下 #left {width: 200px; margin-left: -100%; }得到如下示意图效果
由于margin-right: -100%占据叠到了center列左侧那么需要用定位并且设置right的值为left列的宽度才能放到左侧预留的位置代码如下 #left {width: 200px;margin-left: -100%;position:relative;right: 200px; }这样后得到的示意图效果
接下来对right列进行设置代码如下 #right {width: 150px;margin-right: -150px; }最终的示意图效果
到这儿页面的基本样式完成。但是我们需要考虑页面的最小宽度由于两侧有个固定宽度感觉最小宽度就是200150350px,但是由于left列使用了定位position:relative,所以center列至少有个left设置的right值的宽度即200px,所以最终的最小宽度是200150200550px。 body {min-width: 550px; }那么圣杯布局的整体CSS代码如下 body {min-width: 550px; }#container {padding-left: 200px; padding-right: 150px; }#container .column {float: left; }#center {width: 100%; }#left {width: 200px; margin-left: -100%;position: relative;right: 200px; }#right {width: 150px; margin-right: -150px; }#footer {clear: both; }为了看到效果贴一个完整示例代码有模块的背景色 !DOCTYPE html html head meta charsetUTF-8 title圣杯布局/title style typetext/css html,body {margin: 0;padding: 0;height: 100%; } body {min-width: 550px; } #header,#footer {background: #4d4d50; height: 40px; } #container {padding-left: 200px;padding-right: 150px;height: calc(100% - 80px); } #container .column {float: left; } #center{width: 100%;height: 100%; background: #c3c3cd; } #left {width: 200px;position:relative;margin-left: -100%;right: 200px;background: #2e2eec; } #right {width: 150px;margin-right: -150px;background: #0adf23; } #footer{clear:both; } /style /head body div idheader/div div idcontainerdiv idcenter classcolumn中间内容/divdiv idleft classcolumn左侧内容/divdiv idright classcolumn右侧内容/div /div div idfooter/div /body /html双飞翼布局 DOM结构 div idheader/div div idcontainer classcolumn div idcenter/div /div div idleft classcolumn/div div idright classcolumn/div div idfooter/div双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center另外将.column类从center移至container上。 CSS代码 跟前面思路一样设置各列宽度与浮动为左右两列预留出空间以及底部footer清除浮动代码如下 #container {width: 100%; }.column {float: left; }#center {margin-left: 200px;margin-right: 150px; }#left {width: 200px; }#right {width: 150px; }#footer {clear: both; }将left放到预留位置左侧 #left {width: 200px; margin-left: -100%; }将right放到预留位置右侧 #right {width: 150px; margin-left: -150px; }最终计算页面的最小宽度200150350px;虽然左侧没有用到定位但是如果页面的宽度小于350px,那么会挤占中间center的宽度故设置页面最小宽度为500px,代码如下 body {min-width: 500px; }双飞翼布局的完整CSS代码 body {min-width: 500px; }#container {width: 100%; }.column {float: left; }#center {margin-left: 200px;margin-right: 150px; }#left {width: 200px; margin-left: -100%; }#right {width: 150px; margin-left: -150px; }#footer {clear: both; }为了看到效果也贴一个完整示例代码有模块的背景色 !DOCTYPE html html headmeta charsetutf-8title双飞翼布局/title /head stylehtml,body {margin: 0;padding: 0;height: 100%;}body {min-width: 500px;}#header,#footer {background: #4d4d50;height: 40px;}#container {width: 100%;}#center {margin-left: 200px;margin-right: 150px;background: #c3c3cd;}.column {float: left;}#left{width: 200px;margin-left: -100%;background: #2e2eec;}#right {width: 150px;margin-left: -150px;background: #0adf23;}#footer {clear: both;} /style body div idheader/div div idcontainer classcolumn div idcenter中间内容/div /div div idleft classcolumn左侧内容/div div idright classcolumn右侧内容/div div idfooter/div /body /html扩展实现 如果去掉额外添加的div标签,也能实现相同的布局。 DOM结构变化为如下 div idheader/div div idcenter classcolumn/div div idleft classcolumn/div div idright classcolumn/div div idfooter/div基于双飞翼布局的实现思路只需要在center上做出修改。 1.使用calc() .column {float: left; } #center {margin-left: 200px;margin-right: 150px;width: calc(100% - 350px); } #left{width: 200px;margin-left: -100%; } #right {width: 150px;margin-left: -150px; } #footer {clear: both; }2.使用border-box .column {float: left; }#center {padding-left: 200px;padding-right: 150px;box-sizing: border-box;width: 100%; }需要注意的是由于padding是盒子的一部分所以padding部分会具有中间栏的背景色当中间栏高于侧栏时会出现中间背景色出现在侧栏下面中。 3.使用flex DOM结构如下 !– DOM结构 – div idcontainerdiv idcenter/divdiv idleft/divdiv idright/div /divCSS代码 #container {display: flex; } #center {flex: 1; } #left {flex: 0 0 200px;order: -1; } #right {flex: 0 0 150px; }参考地址 《圣杯布局和双飞翼布局的理解与思考》《CSS布局奇淫巧计之-强大的负边距》