When I returned to the Internet, I wrote some fairly bad code, so that the appearance and behavior of the page were like I hope. I spent a lot of time prepared numerous graphics files, using them to create a mouse stream link (Mouseover) effect and vegetable strip, and found that it takes too long to take too long on the 28.8kb modem to load. I have been looking forward to one day, bandwidth can be as fast as flowing, so my page can be quickly loaded. Ironically, now broadband is more popular, but there are many code of graphics. Fortunately, laminated style table 2 (Cascading style Sheets 2, CSS2) allows us to use their border properties, generate the effects that require many graphics and code to generate.
Page Layout
I have spent a lot of time, using the Table tag, interval GIF and background color, let my page layout look good. Unfortunately, the code written is often bloated, and it is not necessary. Once the writing code is established, it is also difficult and time consuming to change it. With CSS2, especially its border properties, this page can be easily layout without any Table tag or interval GIF. Now let us use the layout of Figure A as an example.
I will start from the creation title area. For a better description, the code in Listing A uses an inline style sheet.
This code created a 75-pixel light blue area, and the area of the area is a black border of a pixel. To ensure compatible with all three major browsers, I have not set the width attribute for the title. Then the TOPNAV area. In order to create this area, I updated the code, as shown by Listing B. Now, in the title, there is a dark blue area, the three sides of this area are a black border of a pixel. I didn't use the border at the top of Topnav because I divide the two areas with the border at the bottom of the title area. Just like the title area, I didn't specify the width for TOPNAV. Next, I joined Leftnav. Its code is like Listing C. Now, the left side of the page has a 200 pixel multiplied a gray bar of 450 pixels. It has a black border of a pixel on both sides, but not. It will take advantage of the borders and footers at the bottom of Topnav. It should be noted that LeftNAV uses a float attribute. By setting floating to "left", Leftnav is always located on the left side of its back element. In the example of this article, it is located on the left side of the body element. After adding the main element, the code is like the Listing D. The main area has 450 pixels high, and there is a border of one pixel on the right side. The body utilizes the border of the top of TOPNAV, the border on the right side of Leftnav, while the footer allows the main area to form a four-sided figures. Just like the title and Topnav, I didn't use the width attribute to the main body.
The last area of this layout is a footer. In order to create a footer, I joined the code in Listing E. There are two things about the footer. First, there is no border properties here. Because the borders of footers and all other elements are black, all of which forms a black border around the footer. Second, I use the Clear Attribute. And set the Clear to "None" so that it will not be affected by other elements. For example, if the main element is used "float: left" (this will put the footer on the right side of the body), "Clear: Both" in the footer replaces the floating property and put the footer on the bottom it belongs. position. Navigation bar
Now we have completed the basic page layout, I can use the CSS2 border to create an artificial button in the TOPNAV area. Figure B shows what is the final page.
Like the page layout, all artificial buttons can be created with CSS2. Listing F provides the code required to add navigation bars. Now four buttons will appear in the Topnav area. There is a black border of a pixel on the right side of each button. The first button utilizes the boundary of the TOPNAV area as its left box. Other buttons use the border of the left button as its left box. I use a "Buttons Strong" style to highlight the buttons corresponding to the user currently located. For example, if this is my home page, I hope the "Home" button style and other different. With the "button highlight" style, I can create a unusual style for any button, just put a tab before and after the text. Since other buttons are also used in hyperlinks, I can use different link behaviors, such as a mouse hover (HOVER) to trigger different styles. This allows me to create a mouse to activate the effect of the link, so when the mouse is placed on the button, the button's background will become dark gray from blue. If there is no CSS2, this type of effect requires two graphics, one for the default state, and the other for the mouse activation link.
Website update is easier
CSS2 not only generates a more refreshing code, but also updates your site more easily than only HTML pages. With CSS2, you don't face a wide range, you need to manually update the code's HTML page, which makes you easily change the entire website through the update style sheet. I use an embedded style sheet in this example; however, you should use an external style sheet to get all the benefits of CSS2. For example, if you are tired of the Leftnav strip, and hope to put it on the right, you can only change style information used for LEFTNAV and main body. This change is reflected on all HTML pages that use the style sheet. Also, if you want more of the names of the button, you don't need to create a new button graphic. Use only the text in this HTML file. This is it, a CSS2 page layout compatible cross-browser, there is no form, no interval gif, no button graphics, and easy to update. English source
