Web standards to create Web Tutorial 9 – the first example of a CSS layout

Posted by admin 0 comments

Then begin to really design a layout. Like the traditional way, you must first have in mind a rough outline of ideas, and then use photoshop to draw it out. You may see the web site are mostly very simple standard, as web standards are more concerned about the structure and content, in fact, it’s beautiful and there is no fundamental conflict of pages, how you want the design on how to design, using traditional methods to achieve the layout of the table, with DIV can be achieved. A mature process technologies, as DIV and TABLE to the same tools, how to use your imagination to see the.

Note: In practical application process, DIV really better in some places convenient form, such as background color definition. However, anything you lose some, choice is your value judgments. Well, not wordy, and we begin:

1. To determine the layout
w3cn the original design sketch design with a form, then three lines are generally lower on the layout. With the DIV, I consider the use of three to the layout.

2. Defines body style
To define the style of the entire body of the 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’, ‘Arial’, ‘New Times New Roman’, arial, verdana, sans-serif;
COLOR: # 666;
FONT-SIZE: 12px;
LINE-HEIGHT: 150%;)
The role of the code above in the last day of tutorials are detailed, we should see at. Defines the border margins to 0; background color is # FEFEFE, background pictures for the bg_logo.gif, picture at bottom right corner of the page, do not repeat; defines the font size 12px; font color is # 666; line high 150%.

3. The definition of the main div
Initial use CSS layout, I decided to use fixed-width layout of three columns (adaptive resolution than the simple design, hoho, not to mention my lazy, the first simple, and increase the point of confidence it!). The definition of left and right respectively, the width of 200:300:280, in the CSS in the following definition:
/ * Style * defines left column page /
# Left (WIDTH: 200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # CDCDCD;
)
/ * Definition of the column page style * /
# Middle (POSITION: absolute;
LEFT: 200px;
TOP: 0px;
WIDTH: 300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # DADADA;
)
/ * Style definitions listed on the right 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 are defined LEFT: 200px; TOP: 0px; and LEFT: 500px; TOP: 0px; This is the key to this layout, I used a layer of absolute positioning. Definition of the middle column from the left page border 200px, from the top 0px; definition of the right column from the left page border 500px, from the top 0px;.

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 designer”: web standards tutorials 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,ajie” />
<meta name=”Copyright” content=”www.w3cn.org,Free copyright willfully” />
<meta name=”description” content=”New Web Designer,webStandard tutorial site,Promote the application of web standards .” />
<meta content=”webstandards,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”> page left column </ div>
<div id=”middle”> page out </ div>
<div id=”right”> page right column </ div>
</ Body>
</ Html>
At this time the page just to see the effect of three tied for the gray rectangle, and a background image. But I hope that height is full screen, how do?

4.100% adaptive high?
In order to maintain the three have the same height, I try to # left, # middle and # right set “height: 100%;”, but found no effect of the desired adaptive high. After some attempts, I had to give each div an absolute height: “height: 1000px;”, and with the contents of the increase needed to adjust this value. Is no way to adaptive high yet? A Czech study with their depth, found a workaround solution, did not really need to set 100%, we have been thinking imprisonment table too, and this approach of learning in the next section in detail.

Filed in html 0 comments
No comments yet. Be the first to leave a comment !
Leave a Comment

Name

Email

Website

Previous Post
« Next Post
»