ホームページ > 記事 > ウェブフロントエンド > 超完全な CSS ソリューション CSSlayout_html/css_WEB-ITnose
超完全な CSS ソリューション CSSlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:561052ブラウズ
1. 固定幅中央レイアウト
まず、ここで説明するのは、実際の戦闘で最もよく使用される、一般的に使用される固定幅中央レイアウトです。
では、大きな背景を適用するかどうかという観点から、全体に大きな背景を適用するタイプと、頭部分に大きな背景を適用する場合の 2 つのタイプに分けることができます。真ん中と下にタイルが貼られています。次に、サイドバーがある場合とない場合の 3 つの状況について説明します。1 つは左側または右側のサイドバーがある場合、1 つはサイドバーがない場合、そして最後の状況は、左右のサイドバーの両方が存在する状況です。
ここで説明するレイアウト スキームは Drupal のテーマに基づいているため、Drupal の CMS を学習した友人であれば、よく知っているはずです。
2.html構造詳細説明
html5タグを使用しているため、ie6-8用のhtml5.jsをインポートする必要があります。次に、クラス ページを使用して div に含めるすべての構造を設定します。ここで、div にレイアウト クラス、side-left、side-right、two-side、および left に対応する no-side も追加する必要があります。それぞれ、右列、左列、右列、サイドバーなしのレイアウトを例として取り上げます。これには、ヘッダー、左、コンテンツ、右、フッターの合計 5 つの領域が含まれます。これは内部 div です。デフォルトでは、内部には 10 ピクセルのマージンがあり、実際のニーズに応じてオーバーライドできます。
3. inner を使用する理由
レイアウトするときに、境界線、左右のマージン、パディングなどを考慮する必要があると何度も言いましたが、今はそれらのことを完全に忘れています。私たちの内なる人に任せて完成させましょう。たとえば、全体の幅は 1000 ピクセル、左右のサイドバーはそれぞれ 200 ピクセル、コンテンツは 600 ピクセルです。これまでの考え方では、左側と右側を 200px にして、中央のコンテンツを 580px (マージンは 10px) または 560px (マージンは 20px) にする必要がありました。このように、980px に変更する必要がある場合は、次のようになります。次に、左右のサイドバーに境界線を追加して202ピクセルにするか、左右の幅を198ピクセルに設定する必要があります。これは非常に混乱します。 innerを導入したことで、borderやmargin、paddingなどを考慮せずにレイアウト時に直接幅を計算し、各エリアでinnerを上書きし直すことができるようになりましたね。参考までに左列と右列のHTMLコードを掲載します。詳細については、以下のデモをご覧ください
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>aside left & right demo</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 7 <!--[if lt IE 9]> 8 <script src="js/html5.js" type="text/javascript"></script> 9 <![endif]-->10 </head>11 <body>12 <div class="page two-asides">13 <header id="header" class="clearfix">14 <div class="inner">15 </div>16 </header>17 18 <section id="container" class="clearfix"> 19 <aside id="aside_left" class="aside">20 <div class="inner">21 </div>22 </aside><!--aside_left-->23 24 <section id="main">25 <div class="inner">26 </div> 27 </section><!--main-->28 29 <aside id="aside_right" class="aside">30 <div class="inner">31 </div>32 </aside><!--aside_right--> 33 </section><!--container-->34 35 <footer id="footer" class="clearfix">36 <div class="inner">37 </div>38 </footer>39 </div>40 </body>41 </html>
ヘッダー、コンテナー、フッター部分の全画面背景をデザインする必要がある場合、上記の 3 つの外側にラップのレイヤーを追加することはできません。 divs。そしてこのラップはフルスクリーンです。
デモ: 左カラム レイアウト 右カラム レイアウト 左右のカラム レイアウト サイドバー レイアウトなし
ps: www.w3cplus.com からの原文