Introduction to DIV CSS in WEB web design (reprinted from: China Webmaster Online)_html/css_WEB-ITnose

3. All auxiliary images should use background processing
Using XHTML CSS layout, there is a technology that you are not used to at first. It should be said that it is a way of thinking and tradition. The table layout is different, that is: all auxiliary images are implemented with backgrounds. Something like this:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
Although it is possible to insert directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the element, while others are similar to logos, title pictures, and list prefixes. Images must be displayed using background or other CSS methods.

There are two reasons for this:

Completely separate the performance from the structure, and use CSS to control all appearance and performance to facilitate revision.
Make the page more usable and friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud.
3. The first CSS layout example

The next step is to actually design the layout. As with the traditional method, you first have to have a rough outline idea in your mind, and then draw it out using photoshop. You may see that most websites related to web standards are very simple, because web standards pay more attention to structure and content. In fact, it has no fundamental conflict with the beauty of web pages. You can design it however you want. The layout is implemented using the traditional table method. DIV can also be implemented. Technology has a maturation process. Think of DIV as the same tool as TABLE. How to use it depends on your imagination.

Note: In actual application, DIV is indeed not as convenient as a table in some places, such as the definition of background color. But everything has gains and losses, and the choice depends on your value judgment. Okay, without further ado, let’s start:

1. Determine the layout
The initial design sketch of w3cn is as follows:

用表格的设计方法的话，一般都是上中下三行布局。用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; }。
这个例子的页面主要代码如下：

It is also worth noting that #menu and #content are floating on the right side of the page "FLOAT: right;", #sidebar is floating on the left side of the #menu layer "FLOAT: left;", this is floating Method positioning, you can also use absolute positioning to achieve such an effect.

There is another problem with this method, that is, the background of the sidebar #sidebar cannot be 100%. The general solution is to fill it with the body's background color. (The background color of #mainbox cannot be used because the background color of #mainbox is invalid in browsers such as Mozilla.)
4. 3D diagram of the CSS2 box model

in CSS2 The box model is key to our layout positioning. For example,