ホームページ > 記事 > ウェブフロントエンド > シンプルな CSS Web ページ レイアウト 1 列、2 列のレイアウトlayout_html/css_WEB-ITnose
シンプルな CSS Web ページ レイアウト 1 列、2 列のレイアウトlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:371935ブラウズ
1. 1 列レイアウト
(1) 1 列アダプティブ
アダプティブブラウザ、ブラウザの伸縮に応じて変化、一般的な幅はパーセントで記述され、非常にシンプルな 8b05045a5be5764f313ed5b9168a17e6
<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 までご連絡ください。