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 principle of CSS processing page. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content,
Then add CSS to the semantics and structure. This article will show you how to structure HTML.
Another reason is that you are too familiar with the performance layer properties (such as: cellpadding,, Hspace, align= "left", etc.), do not know the
Translate to the corresponding CSS statement. When you've solved the first HTML, I'll give you a list of the original tables in detail.
Now the attribute uses what CSS to replace.
Structured HTML
When we first study the Web page, we always think about how to design, consider the pictures, fonts, colors, and layout options. And then we use Photoshop
Or Fireworks, 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 start thinking about your page first, regardless of the appearance.
The semantics and structure of the content.
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
is a well-formed HTML page that can be defined by different CSS, displayed anywhere, on any network device.
Start thinking
The first thing to learn is what is "structure", which some writers also call "semantics". What this term means is that you need to analyze your content block, and each piece of content service
Purpose, and then build the corresponding HTML structure based on these content purposes.
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. In the DIV container
You can include any content block, or you 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 piece of content can be placed on the page
Where, and then specify the color, font, border, background, and alignment properties of this block, and so on.
Using selectors is a wonderful thing.
The name of the ID is the means to control a piece of content, by putting a div on the content block and adding a unique ID, you can use the CSS selector to precisely define each
The appearance of a 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 rules of the picture in the #content.
4th page
"Div + CSS layout Encyclopedia" blog Park Jesse Zhao finishing http://jessezhao.cnblogs.com msn/mail:prolibertine@gmail.com
Another example is that you can define the link styles in different blocks of content with 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, by #content P and #footer p points
Do not define the style of P in #content and #footer. Structurally speaking, your page is made up of pictures, links, lists, paragraphs, and so on, and these elements
will have an impact on what network devices are displayed (PDAs or mobile phones or network TVs), which 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 blockquote
tags, as long as the use of the P tag, and P plus a CSS margin rules can achieve indentation purposes. P is a structured label, margin is the performance attribute, the former
belongs to HTML, and the latter belongs to CSS. (This is the separation of the structure from the performance phase.)
Well structured HTML pages have almost no label for performance attributes. The code is very clean and concise. For example, the original code <table width= "80%"
cellpadding= "3" border= "2" align= "left", which can now be written only in HTML <table> everything that controls 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 often DIV nesting situations and you'll see
There are other layers in the "container" layer, similar in structure:
<div id= "Navcontainer" >
<div id= "Globalnav" >
<ul>a list</ul>
</div>
<div id= "Subnav" >
<ul>another list</ul>
</div>
</div>
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 right, and then give
#globalnav a rule to leave the list to the left, and give #subnav 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 Properties CSS Method Description
Align= "left"
Align= "Right" float:left;
Float:right; Use CSS to float any element: picture, paragraph, Div, title, table, list, etc.
When you use the Float property, you must define a width for this floating element.
Marginwidth= "0" leftmargin= "0" marginheight= "0" topmargin= "0" margin:0; Using CSS, margin can be set in any meta
On the vegetarian, not just the BODY element. More importantly, you can specify the margin values for the top, right, bottom, and left of the elements respectively.
vlink= "#333399" alink= "#000000" link= "#3333FF" A:link #3ff;
a:visited: #339;
A:hover: #999;
A:active: #00f;
In HTML, the color of a link is defined as a property value of the body. The entire page has the same link style. Using CSS selectors, different parts of the page
The link style can be different.
Bgcolor= "#FFFFFF" Background-color: #fff; In CSS, any element can define a background color, not limited to body and table
Elements.
Bordercolor= "#FFFFFF" Border-color: #fff; Any element can be set to a border (Boeder), you can define top, right, bottom, respectively
and left
Border= "3"
5th page
"Div + CSS layout Encyclopedia" blog Park Jesse Zhao finishing http://jessezhao.cnblogs.com msn/mail:prolibertine@gmail.com
cellspacing= "3" BORDER-WIDTH:3PX; With CSS, you can define a table's border as a uniform style, or you can define top, right, bottom
The color, size, and style of the and left border.
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 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-level venom such as div,p can be passed through the Margin-right:auto; and Margin-left:auto; to center horizontally
Some unfortunate skills and working environment
Because the browser is not perfect for CSS support, we sometimes have to take some skill (hacks) or create an environment (workarounds) to let the CSS implement
Traditional methods have the same effect. For example, block-level elements sometimes need to use the techniques of horizontal centering, box model bugs and so on. All these tricks are in Molly.
Holzschlag's article "Integrated Web design:strategies for long-term CSS Hack Management" is described in detail.
Another resource site for CSS tips is big John and Holly Bergevin.
Local Downloads
