Heim > Artikel > Web-Frontend > 圣杯布局三步曲_html/css_WEB-ITnose
圣杯布局三步曲_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:50:331119Durchsuche
前言
所谓的圣杯布局，就是三列布局中，左右两列宽度固定，中间一列的宽度跟随浏览器的宽度的改变而改变。其实现在已经有其它方法也可以实现这种效果，例如CSS3的width:calc(100% - 100px);（注意：减号左右都是有空格的，不然会报错），只是calc( )值兼容到IE9，这是连IE8都抛弃了的节奏啊。或者是使用less之类的css预编译语言来写样式，也可以轻松达到这种效果。当然也还有其它方法...
实现圣杯布局
先上完整代码，copy下来就能使用了
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>圣杯布局</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 20px; } body { /*第三步，设定body的最小宽度，为了避免浏览器的宽度太小，导致第二步中,left模块的margin-left:-100%;还不够将自己全部移到与main水平,出现布局错乱，至于设置多少，就要看自己的left和right的宽度，再结合浏览器自己测试了*/ min-width: 1100px; } header { /*第一步*/ width: 100%; height: 100px; background: #808080; } #content { /*第三步*/ padding-left: 400px; padding-right: 300px; } #main { /*第一步*/ width: 100%; height: 50px; background: #AABBCC; /*第二步*/ float: left; } #left { /*第一步*/ width: 400px; height: 50px; background: #D6D6D6; /*第二步*/ float: left; /*很关键的一步，“负margin-left”的绝对值大于left的宽度，可以让left模块与main模块在同一水平线上，当然，如果“负margin-left”的绝对值小于leftd的话，就不行了*/ margin-left: -100%; /*第三步*/ position: relative; left: -400px; } #right { /*第一步*/ width: 300px; height: 50px; background: #E79F6D; /*第二步*/ float: left; margin-left: -300px; /*第三步*/ position: relative; right: -300px; } footer { /*第一步*/ height: 100px; width: 100%; background: #FFC0CB; } </style> </head> <body> <header>头部 W:100%</header> <section id="content"> <div id="main">中间 W:100%</div><!-- 中间一列放在最上面 --> <div id="left">左边 W:400,margin-left:-100%,relative(left:-400)</div> <div id="right">右边 W:300,margin-left:-300,relative(right:300)</div> </section> <footer>底部 W:100%</footer> </body></html> 最后的样式图为：
最终样式图
第一步进行基本布局，设置每个模块的background-color,width，上代码
<body> <header>头部 W:100%</header> <section id="content"> <div id="main">中间 W:100%</div><!-- 中间一列放在最上面 --> <div id="left">左边 W:400</div> <div id="right">右边 W:300</div> </section> <footer>底部 W:100%</footer> </body>
<style type="text/css"> * { margin: 0; padding: 0; font-size: 20px; } header { /*第一步*/ width: 100%; height: 100px; background: #808080; } #main { /*第一步*/ width: 100%; height: 50px; background: #AABBCC; } #left { /*第一步*/ width: 400px; height: 50px; background: #D6D6D6; } #right { /*第一步*/ width: 300px; height: 50px; background: #E79F6D; } footer { /*第一步*/ height: 100px; width: 100%; background: #FFC0CB; } </style> 效果图为
第一步
第二步将main、left、right模块设置float为left，并利用margin-left将left与right模块提到与main模块在同一行，上代码
<body> <header>头部 W:100%</header> <section id="content"> <div id="main">中间 W:100%</div><!-- 中间一列放在最上面 --> <div id="left">左边 W:400,margin-left:-100%</div> <div id="right">右边 W:300,margin-left:-300</div> </section> <footer>底部 W:100%</footer> </body>
<style type="text/css"> * { margin: 0; padding: 0; font-size: 20px; } header { /*第一步*/ width: 100%; height: 100px; background: #808080; } #main { /*第一步*/ width: 100%; height: 50px; background: #AABBCC; /*第二步*/ float: left; } #left { /*第一步*/ width: 400px; height: 50px; background: #D6D6D6; /*第二步*/ float: left; /*很关键的一步，“负margin-left”的绝对值大于left的宽度，可以让left模块与main模块在同一水平线上，当然，如果“负margin-left”的绝对值小于leftd的话，就不行了*/ margin-left: -100%; } #right { /*第一步*/ width: 300px; height: 50px; background: #E79F6D; /*第二步*/ float: left; margin-left: -300px; } footer { /*第一步*/ height: 100px; width: 100%; background: #FFC0CB; } </style> </head> 第二步中，设置margin-left的值很重要，结果图为
第二步
第三步利用main、left、right三个模块的共同content父模块的padding，结合left、right模块的定位，解决第二步中left、right模块将main的部分内容遮盖的问题，上代码
<body> <header>头部 W:100%</header> <section id="content"> <div id="main">中间 W:100%</div><!-- 中间一列放在最上面 --> <div id="left">左边 W:400,margin-left:-100%,relative(left:-400)</div> <div id="right">右边 W:300,margin-left:-300,relative(right:300)</div> </section> <footer>底部 W:100%</footer> </body>
<style type="text/css"> * { margin: 0; padding: 0; font-size: 20px; } body { /*第三步，设定body的最小宽度，为了避免浏览器的宽度太小，导致第二步中,left模块的margin-left:-100%;还不够将自己全部移到与main水平,出现布局错乱，至于设置多少，就要看自己的left和right的宽度，再结合浏览器自己测试了*/ min-width: 1100px; } header { /*第一步*/ width: 100%; height: 100px; background: #808080; } #content { /*第三步*/ padding-left: 400px; padding-right: 300px; } #main { /*第一步*/ width: 100%; height: 50px; background: #AABBCC; /*第二步*/ float: left; } #left { /*第一步*/ width: 400px; height: 50px; background: #D6D6D6; /*第二步*/ float: left; /*很关键的一步，“负margin-left”的绝对值大于left的宽度，可以让left模块与main模块在同一水平线上，当然，如果“负margin-left”的绝对值小于leftd的话，就不行了*/ margin-left: -100%; /*第三步*/ position: relative; left: -400px; } #right { /*第一步*/ width: 300px; height: 50px; background: #E79F6D; /*第二步*/ float: left; margin-left: -300px; /*第三步*/ position: relative; right: -300px; } footer { /*第一步*/ height: 100px; width: 100%; background: #FFC0CB; } </style> 啦啦啦，最后的成果图
第三步
虽然都是代码，但是注释里都有写过程的呀
吐槽
纠结了一下午要怎么把自己的图片链接到markdown文就上，想过用围脖是个好图床来的，后面发现不能用了。又想着先上传到围脖，再get到图片链接，不过碍于图片水印中围脖名太那啥，本宝宝有点不好意思拿出手>_
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一问就蒙(1)垂直居中_html/css_WEB-ITnoseNächster Artikel：借占位符实现滚动到列表底部重新加载数据_html/css_WEB-ITnose