ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを使用して列レイアウトを作成する

CSSを使用して列レイアウトを作成する

WBOY
リリース: 2023-08-25 17:41:09
転載
1108 人が閲覧しました

使用 CSS 创建列布局

列レイアウトを作成するには、

ドキュメント全体の余白とパディングを次のように設定します。

<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 までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート