Making a deep study of CSS layout Web pages

Are you learning CSS layouts? Are you still unable to fully master the pure CSS layout? There are usually two situations that hinder your study:

The first possibility is that you have not yet understood the CSS Process page principle. Before you consider the overall performance of your page, you should consider the semantics and structure of the content before adding CSS to the semantics and structure. This article will show you how to structure HTML.

Another reason is that you have no idea what CSS statements to translate into the very familiar performance layer attributes (such as cellpadding, Hspace, align= "left", etc.). When you've solved the first problem, and you know how to structure your HTML, I'll give you a list of the original performance attributes in place of CSS.

Structured HTML

When we first study the Web page, we always think about how to design, consider the pictures, fonts, colors, and layout options. Then we use Photoshop or fireworks to draw and cut into small pictures. Finally, all the design restores are displayed on the page by editing the HTML.

If you want your HTML page to be in CSS layout (css-friendly), you need to go back and think about the semantics and structure of your page's content first, regardless of the appearance.

Appearance is not the most important. A well-formed HTML page can appear with any appearance, CSS Zen Garden is a typical example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not only read on the computer screen. The images you have carefully designed with Photoshop may not be visible on PDAs, mobile phones and screen readers. But a well-formed HTML page can be defined by different CSS definitions, displayed anywhere, on any network device.

Start thinking

The first thing to learn is what is "structure", which some writers also call "semantics". The term means that you need to analyze your content block and the purpose of each piece of content service, and then build the corresponding HTML structure based on these content objectives.

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

Flag and Site name

Home Page Content

Site navigation (Main menu)

Sub Menu

Search box

Ribbon (e.g. shopping cart, cashier)

Footer (copyright and related legal notices)

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 blocks, or it can nest another div. A content block can contain arbitrary HTML elements---headings, paragraphs, pictures, tables, lists, and so on.

According to the above, you already know how to structure HTML, now you can make layout and style definitions. Each block of content can be placed anywhere on the page, specifying the color, font, border, background, and alignment properties of the block, and so on.