最狭770px、最広1024pxのクラシックレイアウトの研究

ホームページ

ウェブフロントエンド

CSSチュートリアル

最狭770px、最広1024pxのクラシックレイアウトの研究_CSS/HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:11 PM

最も一般的で実用的なレイアウトは上、中、下で、中央に 3 つの列があります。この例には 2 つの特徴があります。

1. 中央の 3 列の効果は、任意の 1 列の背景色を実現できます。
2. 全体の最小値は 770px、最大値は 1024px です。つまり、ウィンドウが 770xp より小さい場合、下部のスクロールバーが表示されます。ウィンドウが 1024px より大きい場合、画面は自動的に中央に配置されます。。

エフェクトを参照: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm

分析:

一番外側のラッパーにはすべてのコンテンツが内部にネストされており、全体が相対的に配置されています。 max min はすでに最も狭い値と最も広い値をうまく制御していますが、IE には影響しません。他のレイアウトが散在していない場合、この層は実際に本体内に記述することができ、ネスト層が 1 つなくなります。
#wrapper{ 幅:自動; 境界: 1px 最小幅: 1024px; マージン-右: 相対; ;}

ラッパー下部外側ヘッダーフッター

ヘッダーは絶対的に配置され、フッターは相対的に配置されます。外側の余白はそれぞれ左右 130 ピクセルであり、これが非 IE との互換性の鍵となります。
#outer{ margin-left:130px; margin-right:130px; border-left:1px ソリッド #000; }
#ヘッダー位置: 絶対; 左: 0; 幅: 70 ピクセル; 境界線: 非表示; :center; font-size:xx-large}
#footer { width:100%; line-height:1px 背景:#ffc; ; テキスト整列:中央位置;}

外側の下位レベルクリアヘッダーアウターラップ右クリアラー

clearheader はヘッダーの隙間を埋めるために使用されます。clearer は一般的に使用される埋め込みハックです。
アウターラップの幅が 100% ではなく 99% なのはなぜですか?上部の外側のレイヤーには境界線があるため、100% の幅に 2 つの境界ピクセルを加えることにより拡張され、FF の効果は明らかです。
右側の処理は非常に古典的で、IE では位置決めとして、FF ではフローティングとして解決されます。ネガティブマージンの処理でも、上部の外側によって残されたスペースのみが使用されます。
#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; ; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px;
.clearer{ height:1px ; オーバーフロー: 非表示:-1px; }

outerwrap の centercontent left clearer は非常にシンプルで、考え方は上記の説明と似ています。