CSS layout with the traditional form (table) the biggest difference is the layout: the positioning and are based on the original form, the table space or through the use of colorless and transparent GIF images to control the spacing of the text layout of the forum; and now with layers (div ) to locate, through the layer of margin, padding, border and other property to control the spacing forum.
1. Definition DIV
Analysis of a typical example of the definition of div:
# Sample {MARGIN: 10px 10px 10px 10px;
PADDING: 20px 10px 10px 20px;
BORDER-TOP: # CCC 2px solid;
BORDER-RIGHT: # CCC 2px solid;
BORDER-BOTTOM: # CCC 2px solid;
BORDER-LEFT: # CCC 2px solid;
BACKGROUND: url (images/bg_poem.jpg) # FEFEFE no-repeat right bottom;
COLOR: # 666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH: 60%;}
As follows:
● The name of the layer of sample, using <div id=”sample”> the page can call this style.
● MARGIN means the floor outside the left border of the blank, for the margins, or with other layers to create a pitch. ”10px 10px 10px 10px” represent “on lower right left” (clockwise) four margins, if the same can be abbreviated to “MARGIN: 10px;”. If the margin is zero, to write “MARGIN: 0px;”. Note: When the value is zero, in addition to RGB color values of 0% must be followed by a percent sign, otherwise you can not follow behind the unit “px”. MARGIN is transparent element, can not be defined color.
● PADDING layer is border to the gap between the content layer. And margin, as specified on the right lower left border, respectively, to the content of the distance. If you are the same, can be abbreviated as “PADDING: 0px”. Individual designated on the left can be written as “PADDING-LEFT: 0px;”. PADDING is transparent element, can not be defined color.
● BORDER is the layer border, “BORDER-RIGHT: # CCC 2px solid;” is to define the level of the right frame color “# CCC”, width “2px”, style is “solid” line. If you want to dash pattern can be “dotted”.
● BACKGROUND is to define the background layer. Sub-2 definition, first define the image background, the use of “url (.. / images / bg_logo.gif)” to specify the background image path; followed by the definition of background color “# FEFEFE”. ”No-repeat” refers to the background image need not be repeated, if necessary with a horizontal repeat “repeat-x”, vertical repeat with “repeat-y”, repeating the whole background covered with “repeat”. Behind the “right bottom;” refers to the background picture from the bottom right started. If no background image can only define the background color BACKGROUND: # FEFEFE
● COLOR is used to define the font color, has been introduced in the previous section.
● TEXT-ALIGN is used to define the content layer arrangement, center center, left home left, right living right.
● LINE-HEIGHT defined line height, height of 150% means 150% of standard height, you can also write: LINE-HEIGHT: 1.5 or LINE-HEIGHT: 1.5em, the same meaning.
● WIDTH is the width of the definition of layers, you can use a fixed value, for example 500px, the percentage can also be used, as here, “60%.” Note that: the width refers only to the width of your content, does not include margin, border and padding. However, in some browsers are not so defined, you need more try.
Here is the actual performance of this layer:
Source Code to Run [www.HUTSHOW.com]We can see that the border is a 2px gray, the background image in the lower right there is no duplication, content, and left border distance of 20px, the contents of the middle, and expected all the same. hoho, although does not look good, but it is essential to master it, you have learned half of the CSS layout of the technology. Like this, it is not difficult! (The other half is what? The other half is the positioning between the layers. I will explain step by step later.)
2.CSS2 box model
Since 1996, the introduction of CSS1, W3C organization recommended on all pages are placed in a box like (box), the designer can create to control the box define the properties, including those of like paragraphs, lists, headings , pictures, and layer <div>. Box model defines four main areas: content (content), from the border (padding), border (border) and the margin (margin). Above the sample level we are talking about is a typical case. For starters, often confused margin, background-color, background-image, padding, content, border between the level of relationship and interaction. Here are a box model of the 3D sketch, I hope to facilitate your understanding and memory.
3. All with the background picture processing auxiliary
Layout with XHTML + CSS, there is a technical one you are not used to start, it should be said to be a way of thinking is different from traditional table layout, that is: all the auxiliary images are used to achieve the background. Like this:
BACKGROUND: url (images / bg_poem.jpg) # FEFEFE no-repeat right bottom;
Although you can use <img> directly inserted in the content, but this is not recommended. Here the “secondary image” refers to a page that is not part of the content to be expressed, but only used to modify the interval, to remind the pictures. For example: a picture album, pictures, news, pictures, 3d box model the above pictures are all part of the contents, they can be directly inserted elements <img> pages, and other similar logo, title graphics, picture prefix list approach must be adopted or other CSS background display.
The reason for 2 points:
● performance and structure of the complete phase separation (see Read another article: “Understanding the performance and structure of the phase separation”), the appearance of using CSS to control all of the performance, ease of revision.
● make the page more easy to use, more friendly. For example: the blind using screen readers with the background image technology will not be read out.
Related posts:
- The ninth day : The first example CSS layout Then start to really design the layout. And traditional methods, you...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
- The Seventh day : Getting Started with CSS XHTML coding standards in understanding, we will be CSS layout. First...
- The eleventh day : the menu without table Build up the initial layout, I began to fill the...
- the tenth day : adaptive height If we want the end of the 3 column layout...
Related posts brought to you by Yet Another Related Posts Plugin.
