HTML structured design in CSS page layout

Are you learning web standard CSS webpage layout? Isn't it possible to fully master the pure CSS layout? There are usually two types that require special attention:

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 the performance Layer attributes that you are very familiar.

For example, cellpadding, hspace, align = "Left", and so on. You do not know what CSS statements to convert. When you solve the first problem, you know how to structure your HTML, and then give 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", also known as "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 = "Main"> </div>
<Div id = "content"> </div>
<Div id = "nav"> </div>
<Div id = "subnav"> </div>
<Div id = "Search"> </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.

Practice structured

The above is just the most basic structure. In actual application, you can adjust the content block as needed. Div nesting often occurs. You can see other layers in the container layer. The structure is similar to this:

<Div id = "Header">
<Div id = "logo">
<H3> http: // www./<Ul> A list </ul>
</Div>
<Div id = "nav">
<Ul> nav list </ul>
<Form> Search </form>
</Div>
</Div>

The nested Div element allows you to define more CSS rules to control the performance. For example, you can give # header a rule to make them both right or center, let's give the # logo a rule to place it to the left, and give the # nav list a different performance from the form one.