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;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:
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 ">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.
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
