WEB WebデザインにおけるDIV+CSS入門（転載元：China Webmaster Online）_html/css_WEB-ITnose

3. 補助画像はすべて背景付きで処理する必要があります
XHTML+CSS レイアウトを使用するのは、最初は慣れない技術であると言うべきです。従来のテーブル レイアウト、つまり、すべての補助画像はすべて背景を使用して行われます。次のようなもの:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rightbottom;
をコンテンツに直接挿入することもできますが、これはお勧めできません。ここでいう「補助絵」とは、ページ上で表現すべき内容ではなく、装飾や間取り、注意喚起などにのみ使用される絵のことを指します。たとえば、フォト アルバムの画像、画像ニュースの画像、および上記の 3D ボックス モデルの画像はすべて、 要素を使用してページに直接挿入できます。その他の画像はロゴに似ています。タイトル画像とリストのプレフィックスは、背景または他の CSS メソッドを使用して表示する必要があります。

これには 2 つの理由があります:

パフォーマンスを構造から完全に分離し、CSS を使用してすべての外観とパフォーマンスを制御し、改訂を容易にします。
ページをより使いやすく、フレンドリーにします。たとえば、視覚障害者がスクリーン リーダーを使用する場合、バックグラウンド テクノロジを使用して実装された画像は読み上げられません。
3. 最初の CSS レイアウトの例

次のステップは、実際にレイアウトをデザインすることです。従来の方法と同様に、まず頭の中に大まかなアイデアがあり、それを Photoshop を使用して描きます。 Web 標準は構造とコンテンツに重点を置いているため、Web 標準に関連するほとんどの Web サイトは非常にシンプルであることがわかります。実際、Web ページのレイアウトは自由にデザインできます。従来のテーブルメソッドを使用して実装することもできます。テクノロジーには成熟の過程があります。DIV を TABLE と同じツールとして考えてください。使い方はあなたの想像力次第です。

注: 実際のアプリケーションでは、背景色の定義など、いくつかの場所では DIV はテーブルほど便利ではありません。しかし、何事にも得と損があり、選択はあなたの価値判断によって決まります。さて、早速始めましょう:

1. レイアウトを決定します
w3cn の初期設計スケッチは次のとおりです:

用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。

2、定义body样式
先定义整个页面的body的样式,代码如下：

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。

3、定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。

这时候整个页面的代码是：

4、100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法。

自适应高度
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：

Body
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; } 
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }
#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
这个例子的页面主要代码如下：

#menu と #content がページの右側「FLOAT: right;」にフローティングし、#sidebar が #menu レイヤーの左側「FLOAT: left;」にフローティングしていることにも注目してください。はフローティング方式の位置決めであり、絶対位置決めを使用してこの効果を実現できます。

この方法のもう 1 つの問題は、#sidebar の背景を 100% 正確にできないことです。一般的な解決策は、ボディの背景色で塗りつぶすことです。 (Mozilla などのブラウザでは #mainbox の背景色が無効のため、#mainbox の背景色は使用できません。)
4. CSS2 ボックスモデルの 3D 図

CSS2 のボックスモデルは、私たちの