Css+Divレイアウト学習(1)?Divレイアウトの基礎_html/css_WEB-ITnose

前回のシリーズ（Cssの基礎学習?索引）ではCssの基本的なプロパティと使い方を紹介しましたが、今回からはCss+Divレイアウトの内容の一部を解説していきます。皆さん、準備を整えて、レイアウトの旅を始めましょう。 CSS にあまり詳しくない場合は、私の以前の記事をいくつか読んでください。

CSS をレイアウトしたい場合、float は最も重要な属性です。フローティングを使用すると、ブロック要素が要素フローのレイアウト特性に従わなくなります。フローティングが使用されない場合、要素は順番に配置されます。 float 属性には、left、right、none の 3 つの値があり、これらの値は後で使用します。例を使用してレイアウトのプロパティを説明します。

次の説明の準備として HTML ファイルを作成しましょう:

Masthead

Sidebar_a

サイドバー_b

コンテンツ

フッター

この種の HTML は、ブラウザで開いたときに数文字しか含めることができません。まず、ページのレイアウトをより明確に確認できるように、簡単な CSS を追加してマークを付けてみましょう。

ボディ { パディング:10px; マージン:10px; } div { ボーダー:1px; 高さ:20px; } :10px; 背景色:#CCCCCC; } #サイドバー_a { 背景色:#3399CC; } #サイドバー_b { 背景色:#33ff33;

マーキングを容易にするために、各 Div に境界線を追加し、背景色を使用します。

マストヘッド

Sidebar_a

Sidebar_b

コンテンツ

フッター

上面 5 個、個別にネットワーク页モ板里面を代表表頭、表尾、2 つの辺および中間の内容。まだ CSS は追加されていないので、上から下まで 5 Div だけです。まず、マストヘッドとフッターの部分は基本的に要件を満たしています。つまり、中央の 2 つのサイドバーとコンテンツを左から右に配置する必要があります。完成した CSS とレイアウトは次のようになります:

マストヘッド

Sidebar_a

Sidebar_b

コンテンツ

フッター

#Masthead { background-color:#CCCCCC; margin-bottom:10px; } #Sidebar_a { float:left; ; 幅:25%; 背景色:#3399CC; #サイドバー_b { 幅:25%; 背景色:#33ff33; -bottom:10px; height:150px; } #Footer { clear:both; background-color:#ffff00;

まず、すべての HTML が変更されていないことを説明します。とにかく、Cssを追加しただけです。

前後の CSS を比較すると、マストヘッドとコンテンツのコンテンツは変更されていません。Content: 150px の高さは、コンテンツが多い場合にどうなるかを示すためのものです。キーは Sidebar_a では float:left; 、Sidebar_b では float:right; です。この 2 つのプロパティがレイアウトを成功させるのです。 Sidebar_a と Sidebar_b の属性を変更して自分で試してみることもできます。これにより、2 つのサイドバーの位置が入れ替えられ、Div+Css レイアウトの柔軟性が反映されます。

マストヘッド

Sidebar_a

Sidebar_b

コンテンツ

フッター

テーブルの最後にあるフッターには、clear:both; 属性があることを忘れないでください。使用後は浮き上がりが後続の要素に影響を与えるため、清掃が必要です。

注: 上記の HTML 内の 5 つの Div は位置を変更できません。変更しないと、正常に表示されません。特に、コンテンツは 2 つのサイドバーの後ろにある必要があります。
上記は Div のレイアウトを簡単に説明したものです。使いこなせるようになりたい場合は、自分で練習してください。