Day 9: First CSS Layout Example

The next start to really design layout. Like traditional methods, you must first have a rough contour concept in your mind, then draw it with Photoshop. You may see that there are very simple sites about the web standard, because the web standard is more concerned about the structure and content, in fact, it does not have an fundamental conflict with the beautiful view of the webpage, how do you want to design how to design, use the traditional table method to implement the layout, use DIV can also be implemented. Technology has a mature process, regards DIV as a tool as Table, how to use your imagination.

Note: During practical applications, DIV is indeed as convenient to form, such as background colors in some places. But everything is lost, and the payment is your value judgment. Ok, no longer, we started:

1. Determine the layout

The original design sketch of W3CN is as follows:

If the design method of the table is generally the upper and lower three line layout. With DIV, I consider using three columns to lay out, becoming this.

2. Define a Body style

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

Body {margin: 0px; padding: 0px; Background: URL (./ images / bg_logo.gif) #Fefefefe NO-REPEAT Right Bott_ Font-Family: 'Lucida Grande', 'Lucida Sans Unicode', 'Song Body', 'New Song Body', Arial, Verdana, Sans-Serif; Color: # 666; font-size: 12px; line-height: 150%;

The role of the above code has been detailed in the course of the previous day, and everyone should understand it. Define the boundary margins of 0; background color is #fefefe, background picture is BG_LOGO.GIF, the picture is located in the lower right corner of the page, not repeated; define the font size is 12px; the font color is # 666; the row is 150%.

3. Define the main DIV

I used the CSS layout for the first time, I decided to adopt the three-column layout of fixed width (simpler than the design of adaptive resolution, HOHO, don't say that I lazy, first realize simple, increase the confidence!). The width of the left is 200: 300: 280, respectively, in CSS as follows:

/ * Define the page left column style * / # left {width: 200px; margin: 0px; padding: 0px; Background: #cdcdcd;} / * Define the page in the column style * / # middle {Position: absolute; left: 200px; TOP: 0px; width: 300px; margin: 0px; padding: 0px; Background: #dadada;} / * Define page Right Column Style * / # Right {Position: absolute; Left: 500px; Top: 0px; width: 280px; Margin: 0px; Padding: 0px; Background: #fff;

Note: I use Position: Absolute;, then define the LEFT: 200PX; top: 0px; and Left: 500px; Top: 0px; this is the key to this layout, I use the layer Absolute positioning. Define the middle column distance page left box 200px, the top 0px; define the left frame of the right column distance page 500px, the top 0px;

At this time, the code of the entire page is:

" HTML XMLNS = "http : //www.w3.org/1999/xhtml "LANG =" GB2312 ">