シンプルな CSS Web ページレイアウト 1 列、2 列のレイアウトlayout_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

シンプルな CSS Web ページレイアウト 1 列、2 列のレイアウトlayout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

1. 1 列レイアウト

(1) 1 列アダプティブ

アダプティブブラウザ、ブラウザの伸縮に応じて変化、一般的な幅はパーセントで記述され、非常にシンプルな

<html><head lang="en">    <meta charset="UTF-8">    <title>一列布局自适应</title>    <style type="text/css"> body{ margin: 0;      /*清除浏览器默认样式*/ padding: 0;        } div{ text-align: center;  /*字体居中*/ font-size: 30px; font-weight: bold;        } .head,.middle,.foot{ width: 50%;          /*百分比宽度*/ margin: 0 auto;      /* 典型的设置居中*/        } .head{ height: 200px; background: #F0B6CF;        } .middle{ height: 500px; background: tan;        } .foot{ height: 200px; background-color: #57A9D1;        }    </style></head><body>        <div class="head">head</div>        <div class="middle">middle</div>         <div class="foot">foot</div></body></html>

ログイン後にコピー

(2) 1列固定

その名の通り、レイアウトの幅が固定され、固定のPX値が設定されます。

アダプティブHTMLコードの上の列のwidth:50%をwidth:960pxに変更するだけです。もちろん、各部分で異なる幅が必要な場合は、各部分のクラスセレクターを適切に変更するだけです。

2. 2 列レイアウト

(1) 2 列の適応

2 列の適応、今回は float 属性を使用する必要があります。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>二列自适应</title>    <style type="text/css">        body{            margin: 0;      /*清除浏览器默认样式*/            padding: 0;        }        div{            text-align: center;  /*字体居中*/            font-size: 30px;            font-weight: bold;        }        .left{            width: 30%;                             background-color: #CCFF00;            height: 500px;            float: left;         /*先左浮动，使之靠浏览器左侧*/        }        .right{            width: 70%;            height: 500px;            background-color: bisque;            float: right;       /*先右浮动，使之靠浏览器右侧*/        }    </style></head><body>        <div class="left">left</div>        <div class="right">right</div></body></html>

ログイン後にコピー

注: 上記のパーセンテージ 30% と 70% を合計するとちょうど 100% になり、幅はブラウザページ全体に表示されます。合計が 100% にならない場合は、の列が表示されます。それらの間のスペース。

(2) 2 列のセンタリングとアダプティブ

左右の部分を div にラップし、div クラスセレクターで margin:0,auto を選択し、幅を 80% に設定します。ブラウザの幅の 80 % に基づきます。

(3) 真ん中の2列目固定

🎜🎜🎜🎜🎜🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。