Webpage creation tutorial: use CSS to implement webpage layout

Page layout
CSS is easy to layout. If you are used to table layout, it will be difficult at first. In fact, it is not difficult, but it has different motivations and makes more sense in practice.
You can view each part of this page as an independent forum, no matter which one you choose. You can replace this block with an absolute or relative one.
Positioning
Position is used to define whether an element is absolute (absolute), relative (relative), static (static), or fixed (fixed ).
The static value is the default value of an element. It is generated in normal order, just as they appear in HTML.
Relative is similar to static, but the top, right, bottom, and left attributes can be used to offset the original position.
Absolute separates elements from HTML normal streams and sends them to a completely self-contained location world. In this crazy world, this absolute element can be placed anywhere, as long as the top, right, bottom, and left values are set.
Fixed behavior is similar to absolute, but it refers to placing absolute elements in browser windows relative to pages. Therefore, theoretically, when pages are rolled, the fixed elements are completely kept in the browser's View area. Why theoretically? Nothing else. It works well in Mozilla and Opera, but IE doesn't.
Use absolute positioning layout

The code is as follows:	Copy code
<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"> <H1> Ra banjo <P> Welcome to the Ra banjo page. ra Ra banjo. ra Ra banjo. </p> <P> (Ra ra 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:
Apply the following CSS:

The code is as follows:	Copy code
# Navigation {position: absolute; top: 0; left: 0; width: 10em;} # content {margin-left: 10em ;}

You will see that the 10 em navigation bar is set on the left. Because navigation is absolutely positioned and does not affect the flow of other parts of the page, you only need to set the left border width of the content area to the same as the navigation bar width.