ホームページ > 記事 > ウェブフロントエンド > CSS Web ページ レイアウト入門チュートリアル 5: 2 列幅のadaptive_Basic チュートリアル
CSS Web ページ レイアウト入門チュートリアル 5: 2 列幅のadaptive_Basic チュートリアル
- WBOYオリジナル
- 2016-05-16 12:07:171549ブラウズ
2 列固定幅から始めて、2 列レイアウトを試し始めると、左右の列の幅が適応可能になりますが、1 列適応レイアウトから、適応設定は主に次の方法で設定されることがわかります。幅のパーセンテージ値なので、2 列になります。幅アダプティブ レイアウトでは、幅のパーセンテージ値も設計されます。上記の CSS コードを続けて、2 列目の幅の値を新たに定義する必要があります。
コードをコピー コードは次のとおりです。
#left {
背景色: #E8F5FE;
ボーダー: 1px ソリッド #A9C9E2;
フロート: 左;
高さ: 300px;
幅: 20%;
}
#right {
背景-カラー: #F2FDDB;
ボーダー: 1px ソリッド #A5CF3D; フロート: 左;
高さ: 300px;
幅: 70%;
}
左列の幅は幅の 20% に設定され、右列の幅は幅の 20% に設定されます。ページの 70% は、左側にナビゲーションとコンテンツを備えた一般的な Web ページのように見えます右側に。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。