Example parsing CSS Web page layout principle

DIV+CSS layout

It's easy to layout with CSS. If you are accustomed to using a table layout, you will feel more difficult at first. In fact, it is not difficult, but the motives are different, and in practice more meaningful.

You can think of each part of the page as a separate section, whichever you choose. You can replace this block with the block in absolute or relative way.

Positioning

The Positional property position is used to define whether an element is absolute (absolute), relative (relative), static (static), or fixed.

The static value is the default value of the element, which is generated in the normal order, as they appear in HTML.

The relative is much like static, but can be offset from the original position using the top, right, bottom, and left properties.

Absolute separates the elements from the HTML normal stream and sends it to a world of positioning that belongs entirely to itself. In this slightly crazy world, this absolute element can be placed anywhere, as long as the top, right, bottom, and left values are set.

The fixed behavior is much like absolute, but the absolute element is placed in the browser window relative to the page, so, theoretically, when the page scrolls, the fixed element remains completely in the browser viewport. But this is only supported in Mozilla and opera, IE is not supported.

Layout with absolute positioning

The following is the referenced content: <div id= "Navigation" > <ul> <li><a href= "this.html" >This</a></li> <li><a href= "that.html" >That</a></li> <li><a href= "theother.html" >the other</a></li> </ul> </div> <div id= "Content" > <p>welcome to www.devdao.com) </p> </div>

You can create a traditional two-column layout with absolute positioning, as long as the following similar rules are used in HTML:

and apply the following CSS:

#navigation {position:absolute; top:0; left:0; width:10em;} #content {margin-left:10em;}

You will see that the navigation bar with a length of 10em is set to the left. Because navigation is absolutely positional and does not have any effect on the flow of other parts of the page, all you need to do is set the left edge width of the content area to be the same as the width of the navigation bar.

It's so easy! However, you are not constrained by this two-column approach. With smart positioning, you can decorate as many blocks as you need. For example, you need to add a third column that adds a "navigation2" block to the HTML and applies the following CSS:

#navigation {position:absolute; top:0; left:0; width:10em;} #navigation2 {position:absolute; top:0; right:0; wid Th:10em; } #content {margin:0 10em;/* setting top and bottom margin to 0 and ' right ' and ' left margin ' to 10em */}

The only side effect of absolutely locating elements is that because they live in their own world, there is no way to determine exactly where they end up. If you use the above example in a less navigable and multi-content area, there is no problem, however, especially when using the relative values of length and width, it is often necessary to abandon the hope of placing anything like footnotes below. If you really want to do it, instead of positioning them absolutely, you might as well float them.

Floating

The float moves an element to the left or right of the same line, and the content floats around it.

Floating is often used to locate small elements within a page (in the original default CSS of this site the HTML beginner Guide and the "next page" of the CSS Primer Guide are floating to the right.) Also refer to the pseudo-elements: first-letter example), but can also be used in larger chunks, such as navigation columns.

Take the following HTML example to apply the subsequent CSS:

The following is the referenced content: #navigation {float:left; width:10em;} #navigation2 {float:right; width:10em;} #content {margin:0 10em;}

If you do not want the next element to wrap around a floating object, you can use the clear (clear) property. Clear:left clears the left element, Clear:right clears the right element, and Clear:both clears the left and right. So, for example, you need a page footer, you can add a block to the HTML with the id "footer", and then use the following CSS:

#footer {Clear:both;}

It's done. A footnote appears at the bottom of all columns, regardless of how long any one column is.

Attention

The above has largely introduced status and floats, emphasizing the "big" blocks of the page, but keep in mind that these methods can also be used for any element within these blocks. Integrated positioning, floating, boundary, filler and border, can reproduce any layout design, in the layout, there is no CSS to complete the table can do things.

The only reason to use a table layout is when you try to adapt to an old browser. This is also where CSS actually shows its advanced place--on file size, high-usability pages are only fairly small portions of the table-based pages.

From http://www.chinaz.com/design/2008/1113/44763_2.shtml

Example parsing CSS Web page layout principle