ホームページ >ウェブフロントエンド >htmlチュートリアル >聖杯レイアウトの 3 つのステップ_html/css_WEB-ITnose
聖杯レイアウトの 3 つのステップ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:50:331148ブラウズ
はしがき
いわゆる聖杯レイアウトは、左右の列の幅が固定されており、その幅に応じて中央の列の幅が変化するレイアウトです。ブラウザの。実際、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
私は写真をマークダウンテキストにリンクする方法について午後中ずっと苦労していました、そしてスカーフを使用することを考えました、それは良い写真のベッドから来ました、しかし後で。もう使えないことが分かりました。スカーフにアップしてから画像のリンクを取ろうとも考えたのですが、画像の透かしに入っているスカーフの名前が曖昧すぎて、ちょっと恥ずかしくて外すことができませんでした>_<。実際、私もサーバーを持っていますが、実際に使用する前に自分のサーバーにアップロードする方が安全だと思います。 。そして、よく眠った後、フレンドリーな Jianshu Smecta がマークダウン編集環境での画像アップロードも提供していることを発見しました。私はまた本当に愚かでした... ねえ、誰にこの愚かなことを売っているのですか？ ? ?
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。