Benefits of adopting DIV+CSS layout

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;