CSS webpage Layout-webpage page structuring

Are you learning CSS layout? Isn't it possible to fully master the pure CSS layout? There are usually two ways to impede your learning:

The first possibility is that you have not 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 for the semantics and structure. This article will show you how to structure HTML.

Another reason is that you are helpless with performance Layer attributes that you are very familiar with (such as cellpadding, hspace, align = "left", and so on, I don't know what CSS statements should be converted. When you solve the first problem and know how to structure your HTML, I will provide a list to list in detail what CSS is used to replace the original performance attribute.

Structured HTML

When we were just learning how to create a web page, we always thought about how to design the images, fonts, colors, and layout solutions. Then we use Photoshop or Fireworks to draw and cut into small images. Finally, you can edit HTML to restore all designs on the page.

If you want your HTML page to be displayed in CSS layout (CSS-friendly), you need to repeat it without considering the "appearance" first ", you must first consider the semantics and structure of your page content.

The appearance is not the most important. A well-structured HTML page can show any appearance. CSS Zen Garden is a typical example. CSS Zen Garden helps us realize the power of CSS.

HTML is not only read on computer screens. The images you carefully designed with photoshop may not be displayed on PDAs, mobile phones, and on-screen readers. However, a well-structured HTML page can be displayed anywhere on any network device through different CSS definitions.

Start thinking

First, we need to learn what is "structure". Some writers also call it "Semantics ". This term means that you need to analyze your content block and the purpose of each content service, and then create an HTML structure based on the content.

If you sit down and carefully analyze and plan your page structure, you may get a few pieces like this:

Logo and site name

Homepage content

Site Navigation (main menu)

Sub-menu

Search box

Functional area (such as shopping cart and cashier)

Footer (copyright and relevant legal disclaimer)

We usually use DIV elements to define these structures, like this:

<Div id = "header"> </div>

<Div id = "content"> </div>

<Div id = "globalnav"> </div>

<Div id = "subnav"> </div>

<Div id = "search"> </div>

<Div id = "shop"> </div>

<Div id = "footer"> </div>

This is not a layout, but a structure. This is a semantic description of content blocks. After understanding your structure, you can add the corresponding ID to the DIV. The DIV container can contain any content block or nest another DIV. A content block can contain any HTML element, such as the title, paragraph, image, table, and list.

As described above, you already know how to structure HTML. Now you can define la S and styles. Each content block can be placed anywhere on the page, and the color, Font, border, background, and alignment attribute of the block can be specified.

Using selector is a wonderful thing.

The id is used to control a content block. By adding a unique id to the content block with a DIV, you can use the CSS selector to precisely define the appearance of each page element, including the question mark, list, picture, link or paragraph. For example, if you write a CSS rule for # header, it is totally different from the image rule in # content.

Another example is: You can use different rules to define the link styles in different content blocks. Similar to this: # globalnav a: link or # subnav a: link or # content a: link. You can also define different styles for the same element in different content blocks. For example, use # content p and # footer p to define the p style in # content and # footer respectively. In terms of structure, your page consists of pictures, links, lists, paragraphs, etc, these elements themselves do not affect the network devices (PDAs, mobile phones, or network TVs) displayed on which they can be defined as any representation.

A carefully structured HTML page is very simple, and every element is used for structural purposes. When you want to indent a paragraph, you do not need to use the blockquote tag. You only need to use the p tag and add a CSS margin rule to p to indent the paragraph. P is a structured tag, margin is a manifestation attribute, the former belongs to HTML, and the latter belongs to CSS. (This is the phase separation structure .)

The HTML page with a good structure has almost no labels showing attributes. The code is very clean and concise. For example, the original code <table width = "80%" cellpadding = "3" border = "2" align = "left"> can only be written in HTML <table>, everything that controls the performance is written into CSS. In structured HTML, table is a table, rather than anything else (such as being used for layout and positioning ).