Benefits of using Div + CSS layout

1. Introduction: Why is table formatting unwise?

The table exists in HTML for the purpose of displaying the table-like data. However, border = "0" allows designers to place images and text in this invisible grid. So far, tables have dominated the design of visual websites, but they have hindered a better, more friendly, and more flexible way, and more powerful website design methods.
2. Overview: how can this be used for me?

We will tell you this way of working, it will:

Load your pages faster and reduce your traffic fees. This allows you to make modifications to the design more efficient and at a lower cost. This helps your entire site maintain visual consistency and allow your site to be better searched. engine to make your site more friendly to viewers and browsers, more and more people in the world use web standards, it can also improve your competitive strength in the workplace (in fact, reduce the risk of unemployment ).
3. Table Problems
Mix the format data into your content. This makes the file size unnecessary, and the user must download the format information once when accessing each page. Bandwidth is not free. This makes it extremely labor-intensive (and expensive) to redesign existing sites and content ). This also makes it extremely difficult and costly for us to maintain visual consistency across the entire site. Table-based pages also greatly reduce their affinity for the disabled and those who use mobile phones or PDAs.

4. Transitional Design

Use margin and padding to replace redundant table units and interval GIF.

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

<Link href = "basic.css" rel = "stylesheet" type = "text/CSS">

<Style type = "text/CSS" Media = "screen"> <! --
@ Import url(modern.css) screen;
--> </Style>

5. Structured markup: What is written is what you think, and what you think is what you write

Even if CSS is easy to write, CSS is a different way of thinking.

We do not consider "this thing is put here, that thing is put there", but the category and structure of information in the page.

We use the

This is what we call "structure tag" or "semantic tag.

Your content will not be placed in the table and table elements, instead of the DIV elements. You also need to arrange an ID or class for your DIV elements, but this is to describe their content or functions, not their appearance.

When you set an object to italic, either you want to emphasize it or reference the title of a book? For the former, <em> should be used; for the latter, <cite> must be used.

If an object is marked in bold, it should actually be marked as <strong>.

If you want to add a line feed somewhere, this is probably the beginning of a new line. If it is not the beginning, will it be a class (type) that has appeared on your site )? In the above two cases, you should replace them with CSS <br>.

. Foo {display: block}

Consider that the content you want to navigate is unordered links:

Use the <ul> label to edit them.

Link1 link2 link3 link4 link5 horizontal navigation bar

We can use CSS to control the appearance of the list displayed on the webpage.

Using display: inline, we can create a horizontal navigation bar.

Link1 link2 link3 link4 link5, which is used in the navigation bar aboveCode:

# 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 of 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 with table skills to following web standards: Overall considerations

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

Information related to the header and footer content of the sub-navigation bar of the main navigation bar others note Analysis of the table structure composed of nested tables, blank delimiters, and border elements (because we want to replace them with the simple style of marking the Organization with Div ).

Once you have analyzed the Page Structure, you can start to uncover the appearance and analyze the places in your current page code that can be converted into structured tags.

As a perfectionist, eliminate all <font> tags and interval GIF! Similarly, the <B> and <br> tags are also handled. Remove the appearance tags (bgcolor, background, and so on) in the table ). Change the CSS calls (such as <SPAN class = "Header">) that are purely used to indicate the appearance to a structured tag.

7. Change the description appearance tag to the description structure tag.

You can use "Search and add replacement" (or regular expression), but the best way is to open this page in a browser and copy and paste the text into your HTML editor.

The key is to think in a structured way! Replacing the <B> tag with <strong> is far from enough.
Which of the following is the most important entry? Mark it with Select a doctype. (We recommend XHTML Transitional. Unless you are a master, do not use XHTML strict .)

8. reasonably distribute your page in the DIV

Place your main navigation bar in a div whose ID attribute is set to mainnav, and the sub-navigation bar in a div whose ID or class is subnav. The footer is similar to this format: <Div id = "footer">. As for the entire page, it is placed in <Div id = "content">.

Even now it is not so flattering, but as long as you start to add rules to the style sheet, it will become cute immediately.

9. It's time to write your own CSS.

First, set a boundary for each Div. For example, div {border: 1px dotted gray; padding:. 5em} can help you fully view the content in it and no longer need to scroll the screen.

First, write CSS (<HTML>, <body>, <p>,

Use context-related or selector with recursive descent structures as much as possible. This makes your mark clearer. For example: # subnav Li {border: 1px solid black; padding:. 5em; display: inline} can only affect the list items in the DIV of your sub-navigation bar.

Test in as many browsers as possible, such as opera, Firefox... ie5.5, ie6 .......