div+css布局入门（Introduction to div+css layout） Are you learning the CSS layout? Are you still not fully aware of the pure CSS layout? There are usually two situations that hinder your learning:
The first possibility is that you haven't understood the principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS to the semantics and structure. This article will show you how to structure HTML.
Another reason is that you can't do anything about the familiar layer properties (such as cellpadding, hspace, align=, left, etc.) and do not know what CSS statements should be converted to. When you've solved the first problem and know how to structure your HTML, I'll give you a list of what the original performance attributes are, and what CSS will be used instead.
Structured HTML
When we first learn web pages, we always think about how to design, consider the pictures, fonts, colors, and layout schemes. Then we use Photoshop or Fireworks to draw out and cut into small. Finally, restore all of the design restore to the page by editing HTML.
If you want your HTML page to have a CSS layout (CSS-friendly), you need to go back and consider the appearance and semantics of your page without first thinking about the appearance.
Appearance is not the most important. A well structured HTML page can be represented in any form, and CSS Zen Garden is a typical example. CSS Zen Garden helps us eventually realize the power of CSS.
HTML doesn't just read on the computer screen. You use Photoshop carefully designed picture may not be displayed in the PDA, mobile phone and screen reader. But a well - formed HTML page can be displayed anywhere, on any network device, through different definitions of CSS.
Start thinking
The first thing to learn is \and some writers also call it semantics\The term means that you need to analyze your content blocks, and the purpose of each content service, and then build the corresponding HTML structure for these content purposes.
If you sit down to analyze and plan your page structure, you may get a few pieces like this:
Flag and site name
Main page content
Site navigation (main menu) Submenu
Search box
Function area (e.g. shopping cart, cashier)
Footer (copyright and related legal statements)
We usually use DIV elements to define these structures, like this:
This is not a layout, it is a structure. This is a semantic description of the content block. When you understand your structure, you can add the corresponding ID to the DIV. The DIV container can contain any content block, or another DIV can be nested. A content block can contain any HTML elements - headings, paragraphs, pictures, tables, lists, and so forth.
As described above, you already know how to structure HTML, and you can now define layout and style. Each content block can be