XHTML Day 9th: First CSS Layout instance

Css|xhtml

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 ', ' XXFarEastFont-Arial ', ' Neo-Arial ', 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%. 3. Defining the main div The first use of CSS layout, I decided to adopt a fixed-width three-column layout (more than adaptive resolution design simple, HoHo, don't say I lazy, first to achieve simple, add a bit of confidence!) )。 The width of the left and right is defined as 200:300:280, which is defined in CSS as follows: /* Define the left column style of the page * * #left {width:200px; margin:0px; padding:0px; Background: #cdcdcd; } /* Define column style in Page * * #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: Define the columns and the right column Div I have adopted the Position:absolute, and then defined the left:200px;top:0px; and left:500px;top:0px; This is the key to this layout, I use the level of absolute positioning. Define middle column distance page left border 200px, distance top 0px, define right column distance page left box 500px, distance top 0px;. The code for the entire page is: Welcome to the new website designer: Web Standard tutorials and promotions page left-hand column Page columns page right-hand column At this point the effect of the page can only see three parallel gray rectangles, and a background image. But I hope the height is full screen, how to do? 4.1% Adaptive height? To keep the three columns in the same height, I tried to set "height:100%" in the #left, #middle和 #right, but found that there was no desired adaptive height effect at all. After a few attempts, I had to give each div an absolute height: "height:1000px;" and as the content increased, the value needed to be fixed constantly. There is no way to adapt to the height of it? With the depth of his own learning, found a workaround, in fact, do not need to set 100%, we have been locked too deep in the table thinking, this approach in the next section of the study in detail.