一般的に使用される Web ページ レイアウトの 1 つ (div+css)_html/css_WEB-ITnose

暇なときに自分でWebを構築しました。メインインターフェイスはdiv+cssでレイアウトされ、インターフェイス制御とデータ取得にはajax+javascriptが使用されます。
div+css レイアウトについて話しましょう。
ページ全体は、ヘッダー (ロゴ + バナー)、本文 (左側のメニュー + 右側のコンテンツ)、フッター (著作権やファイリングなどの情報の表示) という 3 つの主要な部分に分かれています。私は、position:relative; を使用して 3 つの大きなブロックを設定します。これには、特定のブロックのコンテンツが多すぎて拡張する必要がある場合に、他の部分もそれに応じて位置が調整されるという利点があります。
各ブロックは内部的に左または右としてレイアウトされており、私の左側は

#divLeft
{} {
width:228px;
left:400px;
float:left;
padding:0 ;
margin:0;
filter:revealTrans(duration=2,transition=3) progid:DXImageTransform.Microsoft.Gradient(startColorStr=#adde21, endColorStr=#d8e7c2, gradientType=0);右側は
# divRight
{} { float:left;
height:400px;

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr= #f5efda) , endColorStr=#F7f7f7, gradientType=0);

}
左側の divLeft 部分が非表示になると、右側の divRight 部分が自動的に移動するように、レイアウトの両方の部分で float:left; を使用していることに注意してください。 #divRight が float :right;right:0; を使用する場合、そのような効果は得られません。
ここをクリックしてソースコードをダウンロードしてください