いわゆる聖杯レイアウトは、左右の列の幅が固定されており、その幅に応じて中央の列の幅が変化するレイアウトです。ブラウザの。実際、CSS3 の width:calc(100% - 100px); など、この効果を実現する他の方法もあります (注: マイナス記号の前後にはスペースがあります。そうしないとエラーが報告されます) ) ですが、calc() の値は IE9 と互換性があり、これは IE8 でも放棄されたリズムです。または、less などの CSS プリコンパイル済み言語を使用してスタイルを記述することで、この効果を簡単に実現できます。もちろん他の方法もあります...
最初に完全なコードをアップロードし、コピーして使用できます
<!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>最後のスタイル画像は次のとおりです:
最終的なスタイル図
最初のステップでは、基本レイアウトを実行し、背景色と各モジュールの幅を設定し、コード
<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>レンダリングは
最初のステップ
2 番目のステップメイン、左、右のモジュールを次のように設定します。 float to left、margin-left を使用して left とを結合します。 右側のモジュールはメイン モジュールと同じ行に記述されています。上記のコードは
<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>です。2 番目のステップでは、次のようになります。 margin-left の値を設定することが重要です。結果の画像は
2 番目のステップ
3 番目のステップメインの共通コンテンツの親モジュールのパディングを使用します。 、左と右のモジュールを、左と右のモジュールの位置と組み合わせて、第 2 ステップで左と右のモジュールの問題を解決します。 メインコンテンツの一部をカバーする問題については、コード <> < を追加します。 🎜>
<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>第三段階
全てコードですが、書き込み処理はコメント
Tucao
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
