First CSS Layout instance

The next step is to really design the layout. As with traditional methods, you first have a rough outline in your mind and then use Photoshop to draw it out. You may see Web standards on the site is mostly very simple, because the Web standards more attention to structure and content, in fact, it and the appearance of the Web page does not have a fundamental conflict, you want to design how to design, with the traditional form method to achieve the layout, with Div can also be implemented. Technology has a mature process, the div as a table with the same tools, how to use it depends on your imagination.

Note: In the actual application process, div in some places is not as convenient as the table, such as the definition of background color. But everything is gain, the choice is your value judgment. OK, no wordy, let's start:

1. Determine the layout

W3CN's original design sketches are as follows:

In the form of a table design method, generally are the next three lines of layout. With Div, I consider using three columns to layout, and become like this.

2. Define body style

First define the body style of the entire page, the code is as follows:

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%; }

The above code role in the last day of the tutorial has detailed instructions, we should look at the understanding. Defines a border margin of 0; the background color is #fefefe, the background picture is bg_logo.gif, the picture is in the lower right corner of the page, does not duplicate; the font size is 12px; the font color is #666; The row height is 150%.