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 LayoutThe 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 styleFirst, define the style of the whole page body. The Code is as 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 divWhen 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: In the definition, both the column and the right column div adopt POSITION: absolute;, and LEFT: 200px; TOP: 0px; and LEFT: 500px; TOP: 0px respectively; 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%;" in # left, # middle, and # right, but found that there was 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.
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
