超完全な CSS ソリューション CSSlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. 固定幅中央レイアウト

2.html構造詳細説明

3. inner を使用する理由

ホームページ

ウェブフロントエンド

htmlチュートリアル

超完全な CSS ソリューション CSSlayout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

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 からの原文

このウェブサイトの声明

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