Day 9th: First CSS Layout instance _ Basic Tutorial

Source: Internet
Author: User

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 used position:absolute, and then defined left:200px respectively ; top:0px; and left:500px; top:0px; This is the key to this layout, I used 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:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Welcome to the new website designer: Web Standard tutorials and promotions </title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta http-equiv= "Content-language" content= "gb2312"/>
<meta content= "All" name= "robots"/>
<meta name= "Author" content= "Ajie (at) netease.com, Atzie"/>
<meta name= "Copyright" content= "www.w3cn.org, free copyright, arbitrary reprint"/>
<meta name= "description" content= "new Web Designer, Web Standard tutorial site, driving Web standards in China's application."/>
<meta content= "web standards, tutorials, web, standards, XHTML, CSS, usability, accessibility" name= "keywords"/>
<link rel= "icon" href= "/favicon.ico" type= "Image/x-icon"/>
<link rel= "shortcut icon" href= "Http://www.w3cn.org/favicon.ico" type= "Image/x-icon"/>
<link rel= "stylesheet" rev= "stylesheet" href= "Css/style01.css" type= "Text/css" media= "All"/>
<body>
<div id= "Left" > page left-hand column </div>
<div id= "middle" > Page columns </div>
<div id= "Right" > page right-hand column </div>
</body>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.