Then start to really design the layout. And traditional methods, you must first have in mind the outline of general ideas, and then use photoshop to draw it out. You may see information about web sites mostly very simple standard, as web standards are more concerned about the structure and content, in fact, it is beautiful and there is no fundamental conflict of the page, how you want the design to how to design, using traditional methods to achieve the layout of the table, with DIV can also be achieved. A mature process technology, as DIV and TABLE to the same tools, how to use depends on your imagination.
Note: In practical application process, DIV form in some areas where we as convenient, such as the background color of the definition. But there was nothing beneath, to judge the value that you choose. Well, not wordy, and we began:
1. To determine the layout
w3cn original design sketch is as follows:
Form design with the words, usually in the next three lines on the layout.
With the DIV, I consider the use of three to the layout, as this
2. Defines body style
Body to define the style of the entire page, the code is as follows:
Example Source Code [www.hutshow.com]
body {MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url (.. / images / bg_logo.gif) # FEFEFE no-repeat right bottom;
FONT-FAMILY: ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Arial’, ‘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 the tutorial are described in detail, we should see at. Defines the border margins to 0; background color to # FEFEFE, background image for the bg_logo.gif, pictures in the lower right corner of the page, do not repeat; the font size 12px; font color is # 666; line height to 150%.
3. The definition of the main div
Initial use CSS layout, I decided to use fixed width three column layout (the design than the simple adaptive resolution, hoho, do not say I am lazy, the first simple, and increase the point of confidence it!). The definition of left, right, respectively, the width of 200:300:280, in the CSS in the following definition:
Example Source Code [www.hutshow.com]
/ * Left column defines the page style * /
# Left {WIDTH: 200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: # CDCDCD;
}
/ * Define 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 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;.
At this time the entire page code is:
Click here to view
Only this time the effect of the page to see three gray rectangles side by side, and a background image. But I hope that is the full screen height, and how to do it?
4.100% adaptive height?
In order to maintain the three columns have the same height, I tried # left, # middle and # right setting “height: 100%;”, but found no effect of the desired height adaptive. After some attempts, I had to give each div an absolute height: “height: 1000px;”, and with the increase in the content, needed to adjust this value. Is there no way to adaptive high degree of it? Ah Jie as their depth study and found a workaround solution, in fact, did not need to set 100% table thinking that we have been detained too, this way of learning in the next section in detail.
Related posts:
- The eighth day : Getting Started of CSS layout CSS layout with the traditional form (table) the biggest difference...
- Commonly used methods and techniques CSS layout of the commonly used method float: none |...
- Three rows and three column of highly adaptive DIV layout Three rows and three column of highly adaptive DIV layout...
- the tenth day : adaptive height If we want the end of the 3 column layout...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
Related posts brought to you by Yet Another Related Posts Plugin.
