The use of div+css layout of the good

Css

　　1. Brief introduction: Why is it unwise to use table typesetting?

The table exists in HTML only for one purpose: display tabular data. However, since then the border= "0" allows designers to put pictures and text in the invisible grid. So far, tables dominate the design of visually-rich websites, but they hinder a better, more approachable, more flexible, and more powerful approach to web design.

　　2. Overview: What's the use of this for me?

We will tell you the way it works, it will:

Make your page load faster
Reduce your traffic costs
Allows you to modify the design more efficiently and at a lower cost
Help your entire site maintain visual consistency
Allow your site to be better found by search engines
Make your site more approachable to viewers and browsers
As more and more people in the world adopt WEB standards, it can also improve your competitive power in the workplace (and, in fact, reduce the risk of unemployment).

　　3. Problems caused by the form

Mix the format data into your content.
This makes the file size unnecessarily large, and users must download such formatting information once they visit each page.
Bandwidth is not free.
This makes the redesign of existing sites and content extremely labour-intensive (and expensive).
It also makes it extremely difficult and expensive to keep our entire site visually consistent.
The tabular page also greatly reduces its affinity for people with disabilities and viewers using mobile phones or PDAs.

　　4, the transitional design

Use margin and padding instead of extra table cells and spacer GIFs.

Use link and @import to load styles. The former is used for early browsers, the latter for current browsers.

<link href= "Basic.css" rel= "stylesheet" type= "Text/css" >

<style type= "text/css" media= "screen" ><!--
@import URL (modern.css) screen;
--></style>

　　5. Structured marking: What is written, what you think, what you want to write

Even if it's easy to write CSS, using CSS for typography really requires a different way of thinking than we used to.

We're not thinking about "this stuff here, that stuff there," but the sort of information and the structure of the information in the page.

We use the

This is what we call "structural markers" or "semantic tags."

Your content will not be placed in tables and table elements, but instead they are div elements. Also assign an ID or class to your div element, but this is to describe their content or function, not their appearance.

When you make an object italic, you probably want to emphasize it, or you want to quote a title in a book? If the former, should use <em>; if the latter, in fact, to use <cite>.

If an object is marked as bold, the fact that it should be marked is <strong>.

If you want to add a newline somewhere, this is probably the beginning of a new beginning. If not the beginning, will it be some kind of class (type) that appears in your site? In both cases, you should replace <br> with CSS.

. foo {Display:block}

Consider that what you need to navigate is some sort of unordered link:

Use <ul> tags to edit them.

Link1
Link2
Link3
Link4
Link5
Horizontal navigation bar
We can use CSS to control the appearance of this list on the page.

By using Display:inline we can create horizontal navigation bars.

Link1
Link2
Link3
Link4
Link5
This is the code used by the navigation bar above:

#nav1 {
Margin-top:1em;
Margin-bottom:0.5em;
}

#nav1 ul {
Background-color:silver;
Text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px Solid Gray
}

#nav1 Li {
List-style-type:none;
Padding:0.25em 1em;
border-left:1px solid white;
Display:inline
}

#nav1 Li:first-child {
Border:none;
}

Vertical navigation bar
Link1
Link2
Link3
Link4
Link5
This is the code for the vertical navigation bar:

#nav2 {
Background-color:silver;
Border:solid 1px Gray;
Width:8em
}

#nav2 ul {
List-style-type:none;
margin:0;
padding:0;
Border:none
}

#nav2 Li {
margin:0;
Padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid Gray;
width:100%;
Display:block
}

Html>body #nav2 Li {
Width:auto;
}

#nav2 Li:first-child {
Border:none
}

　　6, from playing table skills to follow the WEB standards: the overall consideration

If you have already divided the contents of the site into classes, then it is time to analyze each page, and then decompose them according to the logical relationship.

Main navigation bar
Sub-navigation bar
Headers and footers
Content
Related information
Other
Note Parsing table structures made up of nested tables, whitespace separators, and border elements (because we want to replace them with a much simpler table structure that is organized with DIV tags).

Once you have analyzed the structure of the page, you can begin to uncover the images and analyze the places in your current page code that can be converted into structured markup.

As a perfectionist, eliminate all the <font> markers and spacer GIF bar!
Similarly, take care of <b> and <br> tags.
Remove those appearance tags from the table (bgcolor, background, and so on).
Change the CSS calls that are used purely to represent the appearance (such as <span class= "header" >) to a structured tag.

　　7, to change the description of the appearance of the mark to describe the structure of the tag

You can use "Find plus" (or regular expressions), but the best way to do this is to open the page in your browser and paste the text into your HTML editor.

The key is to think in a structured way! It is not enough to replace the <b> tag with <strong> only.

Which is the most important item? Mark it with

Select a DOCTYPE to use. (We recommend XHTML transitional, unless you are the master, do not use XHTML strict.) )

　　8, the reasonable distribution of your page in the DIV

Place your main navigation bar in a div with an id attribute set to Mainnav, and the child navigation bar is placed in a div with an ID or class that is subnav. and footer similar to this form: <div id= "Footer", as for the entire page, it is placed in <div id= "Content" > inside.

Even now it's not very flattering, but as soon as you start adding rules to the stylesheet, it's going to be cute.

　　9, is the beginning of their own to write CSS time

First, set a boundary for each div. For example: div {border:1px dotted gray; padding:. 5em} This will help you to see the contents of the entire scene and no longer need to scroll the screen.

First, write CSS (

Use contextual or recursive drop structures as much as possible. This will make your mark clearer. For example: #subnav li {border:1px solid black; padding:. 5em; Display:inline} will be able to affect only the list items in the div of your child navigation bar.

Test in as many browsers as possible, after all, you can ask your friends to help you with their own browser test.

　　10, with CSS layout of the site example

　　11. Bibliography

　　12. Online Resources