CSS レイアウト チュートリアル テンプレート: DIV+CSS を使用して、古典的な 3 行 2 列を実装します。layout_html/css_WEB-ITnose

私は多くの企業 Web サイトやその他の小さな表示 Web サイトを見てきました。それらにはいくつかの共通の特徴があります。つまり、大きなナビゲーションやバナーが上部に配置され、リンクや写真が右側に、コンテンツが左側に配置されます。コンテンツはページの下部に著作権情報などが表示されます。このフォームは中国の古典的なレイアウトです。ここではその視覚効果についてはあまり説明しません。DIV+CSS を使用して 3 行 2 列のレイアウトを実現する方法について説明します。

下の図を見てみましょう:

この構造は誰にとってもよく知られていますが、DIV+CSS を使用して実装するにはどうすればよいでしょうか。以下の分析写真を見てみましょう:

それらの対応関係は次のとおりです:

上: ヘッダ
左: サイドバー
右: コンテナ
下:えー
メインエリア： main

このmainは何をするものですか？中央のサイドバーとコンテナは平行した 2 つの列であるため、それらを所定の位置に維持するためにフロートを設定する必要があります。ただし、ページ全体がブラウザ ウィンドウの中央に配置される必要があります。コンテナのメインを設定し、サイドバーとコンテナをこのコンテナ内にフロートさせることしかできません。センタリングは気にしないでください。 Main は中央に配置したり、背景を設定したりする役割を果たします。

アイデアは非常に明確です。HTML コードを整理し始めます:

< /div>

ヘッダー、メイン、フッターは比較的独立した 3 つのレイヤーであり、サイドバーとコンテナーはメイン レイヤーのサブレイヤーです。ここで 1 つ説明する必要があります。フローティング設定では、どちらをコードの先頭に記述しても、コンテンツを先頭に置いて検索することができます。エンジンは次のようにさらにフレンドリーです:

* { margin:0;

CSS を記述し、上記の各要素のスタイル シートを定義します:

padding:0;

}

全体的なレイアウト ステートメント、marginパディングはゼロです。
#header {

width:776px;

height:100px;
margin:0 auto;

background:#06f;
}

ヘッダーの定義:幅は776ピクセルです。 100px; 上下の余白はゼロ、左右の余白は自動で水平方向の中央揃えになります。背景色は青 #06f です。

#main {

width:776px;

margin:0 auto;
}

mainの定義：幅は776px ; 上下のマージンはゼロ、左右のマージンはゼロ余白は自動的に水平方向の中央揃えに設定され、背景色やその他の設定は行われません。
#main #sidebar {

width:200px;

float:left;
background:#f93;

}

main のサブレイヤーのサイドバーを定義します: 幅は 20 0ピクセル;左にフロート; 背景色はオレンジ #f93 です。

#main #containe {

width:576px;

float:right;
background:#dceafc;

}

main のサブレイヤーコンテナを定義します: 幅は 57 6ピクセル( 776 -200); 背景色は非常に明るい青です #dceafc。

#footer {

width:776px;

height:60px;
margin:0 auto;

background:#666;
}

フッターの定義: 幅は上記と同じ 776 ピクセル、高さは 60 ピクセル、上下の余白は自動で、水平方向の中央揃えが実現されます。背景色は濃い灰色です。 ＃666。

レイアウトの CSS 定義は終わったと思われるかもしれませんが、プレビューを容易にするために、図に示すようにサイドバーとコンテナーの高さを 300px に設定し、効果を確認します。

IEでは全て正常で、意図したコンセプト通りに正常に表示されるのですが、FFではフッターレイヤーが消えてしまいます。 FFは浮いたあとどうなるか分からず、メインの高さも分からないので上に向かって走ってしまって存在が見えないからです。コンテナの背景色を削除すると、FF に表示される内容は次のようになります:

FF が次の方法を認識できるように、サイドバーとコンテナの最後にあるフロートをクリアする必要があります。フッターレイヤーを処理します。フッターレイヤーは直接最上部に配置されず、視覚的に消えます。サイドバーの最後に新しいレイヤーを HTML に追加します。次の内容が含まれます:

;

設定の意味は次のとおりです。 1px; オーバーフローは非表示; 上部マージンは -1px、つまり、このレイヤーは実際には非表示であり、フロートをクリアするためにのみ使用されます。

;

＆lt; /div＆gt;＆lt; div id = "footer"＆gt; /div＆gt; :1px;
overflow:hidden;
margin-top:-1px;
}

タイトル/* CSS ドキュメント * /

* {
マージン:0;
パディング:0;
}
#header {
幅:1002px;
高さ:100px;
マージン:0 auto;

背景:#06f;

}

#main {

幅:1002px ;
margin:0 auto;
background: #dadada;
}

#main #sidebar {

margin:15px 5px 15px 10px;
width:600px;

height:500px;

float:left;
}
#main #containe {
margin:15px 10px 15px 5px;
width:370px;
height:500px;
float:right;
background:#dceafc;
}
#footer {
width:1002px;
height; :60px;
マージン:0 自動;
背景:#666;
}
#clearfloat {
クリア:両方;
高さ:1px;
オーバーフロー:非表示;
マージン-トップ:-1px;
}





OK、これで基本的には問題なくなりました。次のステップは、ページにメニューを設定し、コンテンツを追加し、対応するスタイルを定義することです。

声明：

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

前の記事：DIV CSS デザイン IE6/IE7/FF 互換性の問題解決_html/css_WEB-ITnose次の記事：DIV CSS デザイン IE6/IE7/FF 互換性の問題解決_html/css_WEB-ITnose

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について