Using Web standards establishment of the first nine days: CSS layout entry (2)
Next start to really design the layout. And the traditional method, you must first have in mind a broad outline of ideas, then painting it with photoshop out. You may see the web site of the standards are very simple, because the web standards more concerned about the structure and content of its website in fact there is no fundamental conflict of aesthetics, how you design on how to design, using traditional forms of distribution method used DIV also can be achieved. Technology is a mature process, and TABLE DIV as the same tools, how to use your imagination to see the.
Note: In the actual application process, in some places DIV forms is not easy, for example, the definition of the background color. But anything is a loss, your choice is a value judgement. Well, not wordy, and we begin:
1. W3cn determine the layout of the original design plan are as follows:
Form design methods, are generally on the three lines in the layout 
. DIV with the case, I consider the use of three to the layout, such as 
.
2. Definition body style first definition of the body as a whole pages in the look of the code below:
Body (MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url (.. / images / bg_logo.gif) # FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande', 'Lucida Sans Unicode', '10 lines',' new 10 lines', arial, verdana, sans-serif;
COLOR: # 666;
FONT-SIZE: 12px;
LINE-HEIGHT: 150%;) in the above code on the role of day tutorials are described in detail, we should see at a. Definition of the borders margins 0; # FEFEFE background color, background images for bg_logo.gif, picture pages in the lower right corner, not going to repeat; definition of a font size of 12 px; font color # 666; to 150% higher.
3. Definition of the main div
Initial use CSS layout, I decided to adopt a fixed width of the three layout (Adaptive resolution than the simple design, hoho, lazy, I say, to first achieve a simple, point increase confidence!). Respectively definition of the width of the left, right for 200:300:280 in CSS in the following definition:
/ * Custom pages lined up style * /
# (Left WIDTH: 200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # CDCDCD;
)
/ * Included in the definition of pages style * /
# Middle (POSITION: absolute;
LEFT: 200px;
TOP: 0px;
WIDTH: 300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # DADADA;
)
/ * Definition page right out style * /
# (Right POSITION: absolute;
LEFT: 500px;
TOP: 0px;
WIDTH: 280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # FFF;) NOTE: included in the definition and right out div I used POSITION: absolute;, then define LEFT: 200px; TOP: 0px; and LEFT: 500px; TOP: 0px; this is the layout of the the key, I used a layer of absolute positioning. From the definition of pages left in the middle frame 200 px, from the top 0 px; definition right out from the left frame 500 px pages from the top 0 px;.
At this time the entire page code 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 designers": Guide web standards and promoting </ 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="新网页设计师, webæ ‡å‡†çš„æ•™ç¨‹ç«™ç‚¹,推动webæ ‡å‡†åœ¨ä¸å›½çš„应用." />
<meta Content="webæ ‡å‡†,教程, web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link Rel="icon" href="/favicon.ico" _fcksavedurl=""/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" _fcksavedurl=""css/style01.css"" type="text/css" media="all" />
</ Head>
<body>
<div Id="left"> pages lined up </ div>
<div Id="middle"> page out </ div>
<div Id="right"> pages right out </ div>
</ Body>
</ Html> pages this time the effect can be seen only three tied the grey rectangles, and a background. But I hope that is highly Manping, how do?
4.100% adaptive high?
In order to maintain three have the same height, I would try to left in the # # # right in the middle and set up the "height: 100%;", but found no effect of the expected high degree of adaptive. After a series of attempts, I had to give an absolute height of each div: "height: 1000px;", and with the increase in the content, and that this requires constant value. Is not the highly adaptive approach? With the in-depth study Acha himself, found a flexible solution, virtually 100 percent do not need to set, we have been thinking detained table too, this approach in the next section of the study are described in detail.
Tags: css layout, div css layout, div layout, layout examples, w3c standards, web standards
Leave a Reply