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,CodeAs follows:
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:
/* 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 ;}
Note: I have used column and right column DIV in the definition.Position: absolute;And then defineLeft: 200px; top: 0px;AndLeft: 500px; top: 0px;This is the key to this layout. I use the absolute positioning of the layer. Define the distance between the middle column and the left border of the page, PX from the top, and PX from the Left Border and 0 px from the top of the page ;.
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">
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<Head>
<Title> welcome to the new web designer: Web Standard tutorial and promotion </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, "/>
<Meta name = "Copyright" content = "www.w3cn.org"/>
<Meta name = "Description" content = "New web designer, Web Standard tutorial site, promote the application of Web standards in China."/>
<Meta content = "Web standard, tutorial, 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"/>
</Head>
<Body>
<Div id = "Left"> left column </div>
<Div id = "Middle"> columns on the page </div>
<Div id = "right"> right column </div>
</Body>
</Html>
At this time, the page effect only shows three parallel gray Rectangles and a background image. But what if I want the height to be full?
4.100% adaptive height?To keep the three columns at the same height, I tried to set"Height: 100%;", But found no expected adaptive height effect. After some attempts, I had to give each Div an absolute height: "height: 1000px;", and as the content increases, the value needs to be constantly corrected. Is there no way to adapt to the height? With the deep learning of Alibaba Cloud, Alibaba Cloud has found a flexible solution. In fact, we don't need to set 100%. We have been banned by table thinking too deeply, this method is described in detail in the next section.
10th days: Adaptive height
If we want to add a row of footer at the end of the three columns, and put information such as copyright. You may encounter the problem that you must align the bottom of the three columns. In the table layout, we use the nested small table method in a large table to easily align the three columns. In the DIV layout, the three columns are scattered independently and the content levels are different, which makes it difficult to align. In fact, we can completely nest the DIV, put the three columns into a DIV, and achieve the bottom alignment. The following is an example (simulating a page with a white background ):
BodyHere is # header {margin: 0px; Border: 0px; Background: # ccd2de; width: 580px; Height: 60px;} Here Is # mainbox {margin: 0px; width: 580px; background: # FFF;} contains # menu, # sidebar and # Content
Here is # menu {float: Right; margin: 2px 0px 2px 0px; padding: 0px 0px 0px 0px; width: 400px; Background: # ccd2de ;}
Here is # sidebar {float: Left; margin: 2px 2px 0px 0px; padding: 0px; Background: # f2f3f7; width: 170px;}. The background color is # Main background color.
Here is # Content {float: Right; margin: 1px 0px 2px 0px; padding: 0px; width: 400px; Background: # e0efde ;}
Here is the main content, automatically adapt to the height according to the content
Here is the main content, automatically adapt to the height according to the content
Here is the main content, automatically adapt to the height according to the content
Here is # footer {clear: Both; margin: 0px 0px 0px; padding: 5px 0px 5px 0px; Background: # ccd2de; Height: 40px; width: 580px ;}.
The main code of this example Page is as follows:
<Div id = "Header"> </div>
<Div id = "mainbox">
<Div id = "menu"> </div>
<Div id = "sidebar"> </div>
<Div id = "content"> </div>
</Div>
<Div id = "footer"> </div>
The specific style sheets are written in the corresponding forum. The key point is that the # mainbox layer is nested with the # menu, # sidebar and # Content layers. When # Content content increases, # Content height increases, and # mainbox height also opens. # footer layer moves down automatically. In this way, high self-adaptation is realized.
In addition, it is worth noting that # menu and # content are both floating on the right side of the page "float: right;", # sidebar is floating on the left side of the # menu layer "float: Left ;", this is a floating Method positioning, and you can also use absolute positioning to achieve this effect.
This method has another problem, that is, the background of the side column # sidebar cannot be. The general solution is to fill the full color with the background color of the body. (The background color of # mainbox cannot be used because the background color of # mainbox is invalid in browsers such as Mozilla .)
Well, the main framework has been set up, and the rest of the work is just to add bricks and tiles to it. If you want to try other la S, we recommend that you read the following articles:
TIPS: [onestab's "p. I. e" Topic]. For more information, see.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
