WEB2.0 standard tutorial: The First CSS layout instance on the ninth day

Now we need to design the layout. Like the traditional method, you must first have a rough idea of the outline in your mind, and then use photoshop to draw it out. You may see that most websites related to web standards are simple, because web standards focus more on the structure and content. In fact, they do not fundamentally conflict with the appearance of web pages. You can design them as you want, la s are implemented using the traditional table method, and DIV can also be used. There is a mature process of technology. It depends on your imagination to use DIV as a tool like TABLE.
Note: in actual application, DIV is not as convenient as a table in some places, such as the definition of the background color. But there are gains and losses in everything. The trade-off lies in your value judgment. Well, let's start:
1. Determine the layout
The initial design sketch of w3cn is as follows:
The table design method is usually the layout of the top, bottom, and bottom three rows.
If DIV is used, I want to use three columns for layout.
2. Define the body style
First, define the style of the whole page body. The code is as follows:

The code is as follows:	Copy code
Body {MARGIN: 0px; PADDING: 0px; BACKGROUND: url (../images/bg_logo.gif) # fefefefe no-repeat right bottom; FONT-FAMILY: 'lucida Grande', 'lucida Sans Unicode ', '',' ', arial, verdana, sans-serif; COLOR: #666; FONT-SIZE: 12px; LINE-HEIGHT: 150% ;}

The role of the above code is described in detail in the previous day's tutorial. You should understand it at a glance. Set the border to 0. The background image is bg_logo.gif, and the image is located in the lower right corner of the page. The font size is 12 PX, the font color is #666, and the row height is 150%.
3. Define the main div
When I first used CSS layout, I decided to adopt a fixed-width three-column layout (simpler than adaptive resolution design, hoho, not to mention my laziness. First, it was easy to implement and increased confidence !). Define the width of the left center and right sides as 200: 300: 280, as defined in CSS:

The code is as follows:

Copy code

/* Define the style of the left column on the page */ # Left {WIDTH: 200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: # CDCDCD; } /* Define the column style on the page */ # Middle {POSITION: absolute; LEFT: 200px; TOP: 0px; WIDTH: 300px; MARGIN: 0px; PADDING: 0px; BACKGROUND: # DADADA; } /* Define the style of the right column on the page */ # Right {POSITION: absolute; LEFT: 500px; TOP: 0px; WIDTH: 280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: # FFF ;}