ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して列レイアウトを作成する
CSSを使用して列レイアウトを作成する
- WBOY転載
- 2023-08-25 17:41:091112ブラウズ
列レイアウトを作成するには、
ドキュメント全体の余白とパディングを次のように設定します。
<style>
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>黄色の列を定義します。後で、このルールを -
<style>
<!--
#level0 {
background:#FC0;
}
-->
</style>にアタッチします。次に、レベル 0 内に別のパーティションを定義します。 -
<style>
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>さらに 1 つのパーティションをネストします。完全なコードは次のとおりです。-
<style>
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id="level0">
<div id="level1">
<div id="level2">
<div id="level3">
<div id="main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body> 以上がCSSを使用して列レイアウトを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。