Day 9th: First CSS Layout instance _ Basic Tutorial

The next step is to really design the layout. As with traditional methods, you first have to have a rough outline of your mind, and then use Photoshop to draw it out. You may see the Web standards of the site is mostly simple, because the Web standards more attention to structure and content, in fact, it does not have a fundamental conflict with the aesthetics of the Web page, you want to design how to design, with the traditional table method to achieve the layout, with Div can also be achieved. Technology has a mature process, the div as a table-like tool, 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 gains, and the choice lies in your value judgment. OK, no more wordy, let's start:

1. Determine the layout

The original design sketches for W3CN are as follows:

In the form of the design method, it is generally the upper and lower three line layout. With div words, I consider using three columns to lay out, to be like this.

2. Define body style

Define the body style of the entire page first, with the following code:

body {margin:0px;
padding:0px;
Background:url (.. /images/bg_logo.gif) #FEFEFE no-repeat right bottom;
font-family: ' Lucida Grande ', ' Lucida Sans Unicode ', ' Arial ', ' New song Body ', Arial,verdana,sans-serif;
COLOR: #666;
font-size:12px;
line-height:150%; }

The function of the above code in the last day of the tutorial is detailed, you should see it. The border margin is defined as 0, the background color is #fefefe, the background image is bg_logo.gif, the picture is in the lower right corner of the page, not duplicated, the font size is 12px, the font color is #666, and the line height is 150%.

3. Define the main div

For the first time using the CSS layout, I decided to adopt a fixed-width three-column layout (more simple than the adaptive resolution design, HoHo, don't say I'm lazy, first realize simple, add a bit of confidence!) )。 The width of the left and right is defined as 200:300:280, which is defined in the CSS as follows:

/* Define page left column style */
#left {width:200px;
margin:0px;
padding:0px;
BACKGROUND: #CDCDCD;
}
/* Define column styles in Page */
#middle {position:absolute;
left:200px;
top:0px;
width:300px;
margin:0px;
padding:0px;
BACKGROUND: #DADADA;
}
/* Define the right column style for the page */
#right {position:absolute;
left:500px;
top:0px;
width:280px;
margin:0px;
padding:0px;
BACKGROUND: #FFF; }

Note: The definition of the column and right column Div I have used Position:absolute, and then respectively defined the left:200px; top:0px; and left:500px; top:0px; This is the key to this layout and I used the absolute positioning of the layer. Define the middle column distance to the left border of the page 200px, distance from the top 0px; define right column distance from page left box 500px, distance from top 0px;

The code for the entire page is:

Welcome to the new Web Designer: Web Standard tutorial and promotion












Page left column
Columns in the page
Page right Column

The effect of this page is to see only three gray rectangles in parallel, and a background map. But I hope the height is full screen, how to do?

4.1% self-adapting height?

To keep the three columns having the same height, I tried to set "height:100%;" in #left, #middle和 #right, but found that there was no expected adaptive height effect at all. After some attempts, I had to give each div an absolute height: "height:1000px;" and as the content increases, the value needs to be fixed constantly. Isn't there a way to adapt to heights? With an in-depth study of the Czech Republic, found a flexible solution, in fact, do not need to set 100%, we have been the table thinking is too deep, this method in the next section of the study detailed introduction.

