Div + CSS divcss layout getting started tutorial Xunlei download

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 principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the meaning and structure of the content,
Then add CSS for the semantics and structure. This article Article It will show you how to structure HTML.
Another reason is that you are helpless with the performance Layer attributes that you are very familiar with (for example, cellpadding, hspace, align = "Left", and so on ).
Convert to the corresponding CSS statement. When you solve the HTML section, I will provide another list to list the original table in detail.
The current attribute is replaced by CSS.
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 can be drawn 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 the page without thinking about the "appearance" first.
The meaning and structure of the 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 finally 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 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. In Div container
It 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 on any page
Specify the color, Font, border, background, and alignment attribute of the block.
Using selector is a wonderful thing.
The ID name is used to control a content block. By adding a div to the content block and a unique ID, you can use the CSS selector to precisely define each block.
Page elements, including titles, lists, images, links, and paragraphs. For example, if you write a CSS rule for # header, it is totally different from
# Image rules in content.
Page 1

The DIV + CSS layout Daquan blog Park Jesse Zhao finishing http://jessezhao.cnblogs.com MSN/mail: prolibertine@gmail.com
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
Do not define the P style in # Content and # footer. In terms of structure, your page consists of pictures, links, lists, paragraphs, and other elements.
It affects the network devices (PDA, mobile phone, or network TV) that can be defined as any appearance.
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 BLOCKQUOTE
Label. As long as the P label is used and a CSS margin rule is added to P, indentation can be achieved. P is a structured tag, and margin is a manifestation attribute.
HTML and CSS. (This is the phase separation structure .)
The HTML page with a good structure has almost no labels showing attributes. Code Very clean and concise. For example, <Table width = "80%"
Cellpadding = "3" border = "2" align = "Left"> now you can only write <Table> in HTML, and write all the control items in CSS.
In structured HTML, a 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, and you will see
There are 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 then
# Globalnav: a rule places the list to the left, while a list of # 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 in any element
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. The CSS selector is used for different parts of the page.
The link style can be different.
Bgcolor = "# ffffff" background-color: # FFF; in CSS, any element can define the background color, not only the body and table
Element.
Bordercolor = "# ffffff" border-color: # FFF; you can set a boeder for any element. You can define top, right, and bottom respectively.
And left
Border = "3"
Page 1

The DIV + CSS layout Daquan blog Park Jesse Zhao finishing http://jessezhao.cnblogs.com MSN/mail: prolibertine@gmail.com
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, and bottom respectively.
And left border color, size, and style.
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 clear
Attribute.
Cellpadding = "3"
Vspace = "3"
Hspace = "3" padding: 3px; with CSS, you can set the padding attribute for any element. Similarly, you can set top, right, and bottom for padding respectively.
And left. 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 the browser does not fully support CSS, we sometimes have to adopt some skills (Hacks) or create an environment (workarounds) to Implement CSS.
Traditional methods have the same effect. For example, block-level elements sometimes need the skills of horizontal center and Box Model bug. All these skills are in Molly
Holzschlag's article integrated web design: Strategies for long-term CSS hack Management contains detailed descriptions.
Another resource site for CSS skills is Big John and Holly bergevin.
Local download