Getting started with Div + CSS layout [go]

This is an article I saw on a web designer. It is very suitable for beginners who use Div + CSS layout and turn to favorites, Hoho ~~

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 to convert. 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 title, list, image, 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, in the original code, 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 ).

Practice structuring in person
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 = "navcontainer">
<Div id = "globalnav">
<Ul> A list </ul>
</Div>
<Div id = "subnav">
<Ul> another list </ul>
</Div>
</Div>

The nested Div element allows you to define more CSS rules to control the performance. For example, you can give # navcontainer a rule to set the list to the right and # globalnav a rule to set the list to the left, the list for # subnav has a completely different performance.

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

HTML attributes and corresponding CSS Methods
HTML attribute CSS method description
Align = "left"
Align = "right" float: left;
Float: Right; Use CSS to float any elements: images, paragraphs, Div, title, table, list, etc.
When you use the float attribute, you must define a width for the floating element.

Marginwidth = "0" leftmargin = "0" marginheight = "0" topmargin = "0" margin: 0; with CSS, margin can be set on any element, not just the body element. more importantly, you can specify the top, right, bottom, and left margin values for each element.

Vlink = "#333399" alink = "#000000" link = "# 3333ff" A: link # 3ff;
A: visited: #339;
A: hover: #999;
A: active: # 00f;
In HTML, the link color is defined as a property value of the body. The link style of the entire page is the same. With the CSS selector, the link styles of different parts of the page can be different.

Bgcolor = "# ffffff" background-color: # FFF; in CSS, any element can define the background color, not just the body and table elements.

Bordercolor = "# ffffff" border-color: # FFF; you can set a boeder for any element. You can define top, right, bottom, and left respectively.
Border = "3"
Cellspacing = "3" border-width: 3px; with CSS, you can define the border of a table as a uniform style, or you can define top, right, respectively, the color, size, and style of the bottom and left border.

You can use the table, TD or th selectors.

If you need to set the border-less 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-or 3-column la s are located using the float attribute. If you define the background color or background image in the floating layer, you can use the clear attribute.

Cellpadding = "3"
Vspace = "3"
Heat map = "3" padding: 3px; with CSS, you can set the padding attribute for any element. Similarly, you can set top, right, bottom and left for padding respectively. Padding is transparent. Align = "center" text-align: center;

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

Block-level complaints such as Div and P can be horizontally centered through margin-Right: auto; and margin-left: auto;

Some unfortunate skills and work environment
Because browsers do not fully support CSS, we sometimes have to adopt some skills (Hacks) or create an environment (workarounds) to make CSS achieve the same effect as traditional methods. For example, block-level elements sometimes need the skills of horizontal center and Box Model bug. All these skills are described in detail in Molly holzschlag's article integrated web design: Strategies for long-term CSS hack management.

Another resource site for CSS skills is "position is everything" of Big John and Holly bergevin ".

Understanding floating Behavior
Eric Meyer's containing floats helps you understand how to use the float attribute layout. Float elements sometimes need to be cleared. Reading how to clear floats without structural markup will be very helpful.

More help
The existing "CSS discussion" list is a good resource, it collects information about a wikis discussion group, including the CSS layout Summary (css-discuss.incutio.com /? Page = csslayouts), CSS techniques (css-discuss.incutio.com /? Page = csshack) and more