Web page production Tutorial: Using CSS to achieve page layout

css| Tutorials | Web page

　　Page 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 look at each part of the page as a separate section, whichever you choose. You can replace this block in absolute or relative detail.

　　Positioning

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

Static values are the default values for elements that are generated in a normal order, as they appear in HTML.

Relative is much like static, but you can offset the original position with the top, right, bottom, and left properties.

The absolute separates the elements from the HTML common stream and sends it to an entirely own positioning world. In this slightly crazy world, this absolute element can be placed anywhere, as long as the values of top, right, bottom, and left are set.

Fixed behavior is also similar to absolute, but the reference to the browser window in relation to the page to place an absolute element, so, theoretically, when the page is scrolling, the fixed element is completely in the browser viewport. Why is it theoretical? Not for anything else, it works well in Mozilla and opera, but IE doesn't.

　　Use absolute positioning layout

<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 the RA Ra Banjo Banjo page. Ra ra banjo Banjo. Ra ra banjo Banjo. Ra ra banjo Banjo. Ra ra banjo banjo.</p>
<p> (Ra ra banjo banjo) </p>
</div>

You can use absolute positioning to create a traditional two-column layout, 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 length of the 10em navigation bar is set to the left. Because navigation is absolutely positioned, there is no effect on the flow of other parts of the page, so all you have 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 limited by the two-column approach. With smart positioning, you can decorate as many blocks as you need. For example, you need to add a third column, you can add "Navigation2" blocks for HTML and apply the following CSS:

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

The only side effects of absolute positioning elements are that, because they live in their own world, there is no way to determine exactly where they end up. If you use the example above in a less navigable and more content area, there is no problem, but, especially when using the relative values of length and width, you often have to give up the hope of placing anything like footnotes below. If you really want to do it, instead of absolutely positioning them, float them.

　　Floating

The float moves one element to the left or right on the same line, and the content floats around.

Floating is often used to locate a small element within a page (the original default CSS in this site the HTML primary guide and the CSS Primary guide of the "next page" connection is floating to the right. Also, see the first-letter example in pseudo elements, but can also be used in larger blocks, such as navigation columns.

Take the following HTML example, and you can apply subsequent CSS:

#navigation {float:left; width:10em;}

#navigation2 {float:right; width:10em;}

#content {margin:0 10em;}

If you don't want the next element to wrap around a floating object, you can use the clear (purge) attribute. Clear:left clears the left element, Clear:right clears the right element, and Clear:both clears the left and right sides. So, for example, you need a page footer, you can add a block to the HTML with the ID "footer" and use the following CSS:

#footer {Clear:both;}

Well, you've done it. A footnote appears below all columns, regardless of how long each column is.

　　Attention

We have largely introduced status and floats, highlighting the "big" blocks of the page, but keep in mind that these methods can also be used for any element within those blocks. Integrated positioning, floating, boundaries, fillers and borders, you can reproduce any layout design, in the layout, no CSS can not complete the form of things to do.

The only reason to use a table layout is if you're trying to adapt to an old browser. This is also where CSS actually shows its sophistication--on file size, the High usability page is only a small part of the page that is quite based on the table.