テーブルデザイン手法を使用する場合、通常は上段、中段、下段の 3 列レイアウトになります。 
。 DIVを使用する場合は、次のようにレイアウトに3つの列を使用することを検討します
。
2. ボディスタイルを定義する
まず、ページ全体の本文のスタイルを定義します。コードは次のとおりです。
ボディ { マージン: 0px;
パディング: 0px;
背景: url(../images/bg_logo.gif) #FEFEFE 繰り返しなし右下;
FONT-FAMILY: 'Lucida Grande'、'Lucida Sans Unicode'、'宋体'、'新宋体'、arial、verdana、sans-serif;
色: #666;
FONT-SIZE:12px;
行の高さ:150%;
上記のコードの機能は前日のチュートリアルで詳しく説明されているので、誰でも一目で理解できるはずです。境界線のマージンは 0、背景色は #FEFEFE、背景画像は bg_logo.gif、画像はページの右下隅に配置され、フォント サイズは 12px として定義されます。色は #666、行の高さは 150% です。
3. メイン div を定義する
初めて CSS レイアウトを使用したとき、固定幅の 3 列レイアウトを使用することにしました (これは、適応解像度設計よりも単純です。ほほ、怠け者だとは言わないでください。自信を得るために、最初に簡単なレイアウトを実装してください) !)。左、中央、右の幅をそれぞれ 200:300:280 に定義し、CSS で次のように定義します。
/*ページの左側の列スタイルを定義します*/
#left{ 幅:200ピクセル;
マージン: 0px;
パディング: 0px;
背景: #CDCDCD;
}
/*ページ上の列スタイルを定義します*/
#middle{ 位置: 絶対;
左:200ピクセル;
トップ:0px;
幅:300ピクセル;
マージン: 0px;
パディング: 0px;
背景: #ダダダ;
}
/*ページの適切な列スタイルを定義します*/
#right{ 位置: 絶対;
左:500ピクセル;
トップ:0px;
幅:280ピクセル;
マージン: 0px;
パディング: 0px;
背景: #FFF;
注: 中央の列と右の列の div を定義するときに POSITION:Absolute; を使用し、次に LEFT:200px;TOP:0px; と LEFT:500px;TOP:0px; を使用しました。レイヤーの絶対位置。中央の列をページの左端から 200 ピクセル、上から 0 ピクセルに定義し、右の列をページの左端から 500 ピクセル、上から 0 ピクセルに定義します。
この時点で、ページ全体のコードは次のようになります。
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<頭>
<title>新しい「Web デザイナー」へようこそ: Web 標準のチュートリアルとプロモーション</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="コンテンツ言語" content="gb2312" />
<meta content="all" name="ロボット" />
<meta name="author" content="ajie(at)netease.com, 阿杰" />
<meta name="著作権" content=" www.w3cn.org 、著作権は無料、いかなる複製も自由です" />
<meta name="description" content="中国での Web 標準の適用を促進する、新しい Web デザイナー、Web 標準チュートリアル サイト。" />
<meta content="Web 標準、チュートリアル、Web、標準、xhtml、CSS、使いやすさ、アクセシビリティ" name="キーワード" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="ショートカット アイコン" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<本文>
<div id="left">ページの左列</div>
<div id="middle">ページ中央の列</div>
<div id="right">ページの右列</div>
</body>
</html>
現時点では、ページ効果では、並べられた 3 つの灰色の四角形と背景画像のみが表示されます。しかし、高さを全画面にしたいのですが、どうすればよいでしょうか?
4.適応身長は100%?
3 つの列を同じ高さに保つために、#left、#middle、#right に「height:100%;」を設定してみましたが、期待される高さの適応効果がまったくないことがわかりました。何度か試した結果、各 div に絶対高さ「height:1000px;」を与える必要があり、コンテンツが増加するにつれて、この値を常に修正する必要がありました。高さを調整する方法はないのでしょうか？アジエ自身の研究が深まるにつれ、実際には 100% を設定する必要はまったくありません。この方法については、次の研究セクションで詳しく紹介します。