HTML structured: Getting Started with Div+css page layouts

css| Web page 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:

<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, 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.

Using selectors is a wonderful thing
the name of the ID is a means of controlling a block of content, by putting a div on the content block and adding a unique ID, you can use a CSS selector to precisely define the appearance of each page element, including headings, lists, pictures, links, paragraphs, and so on. For example, if you write a CSS rule for #header, it can be completely different from the #content picture rules. Another example of

is that you can define the link styles in different blocks of content through different rules. Like this: #globalnav a:link or #subnav a:link or #content a:link. You can also define different styles for the same elements in various blocks of content. For example, the styles of p in #content and #footer are defined by #content p and #footer p respectively. Structurally, your page is made up of pictures, links, lists, paragraphs, and so on, and these elements don't have any effect on what network devices (PDAs or mobile phones or network TVs) are displayed, and they can be defined as any appearance of appearances.

A carefully structured HTML page is very simple, and each element is used for structural purposes. When you want to indent a paragraph, you don't need to use the blockquote tag, just use the P tag, and add a CSS margin rule to p to achieve indentation. P is a structured label, margin is the performance attribute, the former belongs to HTML, the latter belongs to CSS. (This is the separation of the structure from the performance phase.)

There are almost no labels in a well-formed HTML page for performance properties. The code is very clean and concise. For example, the original code

in HTML only, and all control performance is written in CSS. In structured HTML, table is a table, not something else (such as being used for layout and positioning).

Practice it yourself. Structured

The above is just the most basic structure, in practical applications, you can adjust the content block as needed. There are always instances of div nesting, and you'll see that there are other layers in the "container" layer, similar in structure:

a list

another list

Nested div elements allow you to define more CSS rules to control performance, such as: You can give #navcontainer a rule to get the list to the right, and then give #globalnav a rule to leave the list to the left, and give #subnav's list another completely different performance.

Replace traditional methods with CSS
The following list will help you replace the traditional method with CSS:

HTML properties and corresponding CSS methods
HTML properties


CSS method description
Align= ' Left '

align= ' right ' float:left;

Float:right use CSS to float any element: picture, paragraph, Div, title, table, list, and so on

when you use the Float property, you must define a width for the floating element.

marginwidth= "0" leftmargin= "0" marginheight= "0" topmargin= "0" margin:0; using CSS, margin can be set on any element, Not just the BODY element. More importantly, you can specify the margin values for the top, right, bottom, and left of the elements.

vlink= "#333399" alink= "#000000" link= "#3333FF" A:link #3ff;

a:visited: #339;

A:hover: #999;

A:active: #00f;
in HTML, the color of the link is defined as a property value of the body. The entire page has the same link style. With CSS selectors, the link styles for different parts of the page can vary.

bgcolor= "#FFFFFF" Background-color: #fff; in CSS, any element can define a background color, not just the body and table elements.

bordercolor= "#FFFFFF" Border-color: #fff; Any element can have a border (boeder), you can define top, right, bottom, and left

individually border= "3" cellspacing= "3" BORDER-WIDTH:3PX; With CSS, you can define a table's border as a uniform style, or you can define the color, size, and style of top, right, bottom and left borders, respectively.

You can use table, TD or th these selectors.

If you need to set no border effect, you can use the CSS definition: border-collapse:collapse;

<BR clear= "left"
　　
<BR clear= "Right"

<BR clear= "All" >

Clear:left;

Clear:right;

Clear:both;
Many 2-column or 3-column layouts are positioned using the float property. If you have a background color or background image defined in the floating layer, you can use the clear property.

Cellpadding= "3"

Vspace= "3"

Hspace= "3" PADDING:3PX; With CSS, any element can be set padding properties, the same, padding can be set top, right, bottom and left. The padding is transparent.

align= "center" text-align:center;

Margin-right:auto; Margin-left:auto;
Text-align only applies to text.

Block levels such as div,p can be passed through Margin-right:auto; and Margin-left:auto; to center horizontally

Some unfortunate skills and working environment


Because browsers are not perfect for CSS support, we sometimes have to take some skill (hacks) or create an environment (workarounds) to make the CSS implement the same effect as traditional methods. For example, block-level elements sometimes need to use the techniques of horizontal centering, box model bugs and so on. All of these tips are detailed in the Molly Holzschlag article "Integrated Web design:strategies for long-term CSS Hack".

Another resource site for CSS tips is the "Position is Everything" of Big John and Holly Bergevin.

Understanding floating Behavior

Eric Meyer's "containing floats" will help you learn how to use the Float property layout. Float elements sometimes need to be cleared (clear), and reading "How to clear floats without structural Markup" will be very helpful.

More help

The existing "CSS Discussion" list is a good resource for collecting information about a Wikia discussion group, including CSS layout summaries (css-discuss.incutio.com/?page=csslayouts), CSS Tips Summary ( Css-discuss.incutio.com/?page=csshack) and more.