Maison >interface Web >tutoriel HTML >圣杯布局三步曲_html/css_WEB-ITnose
圣杯布局三步曲_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 08:50:331129parcourir
前言
所谓的圣杯布局，就是三列布局中，左右两列宽度固定，中间一列的宽度跟随浏览器的宽度的改变而改变。其实现在已经有其它方法也可以实现这种效果，例如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到图片链接，不过碍于图片水印中围脖名太那啥，本宝宝有点不好意思拿出手>_
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：一问就蒙(1)垂直居中_html/css_WEB-ITnoseArticle suivant：借占位符实现滚动到列表底部重新加载数据_html/css_WEB-ITnose