Div + CSS layout

xiaoxiao2021-04-10 372

Are you learning CSS layout? Is it still can't fully master the pure CSS layout? There are usually two cases hinder your learning:

The first one may be that you haven't understood the principle of the CSS processing page. Before you consider your page overall performance, you should first consider the semantics and structure of the content, and then add CSS to the semantics. This article will tell you how to structure HTML.

Another reason is that you have no more familiar performance layer properties (for example: cellpadding, hspace, align = "left", etc.), do not know what CSS statement that converts to the corresponding. When you solve the first question, I know how to structure your HTML, I will give a list again, and the original performance attribute is used for any CSS instead.

Structured HTML We always consider how to design, consider those pictures, fonts, colors, and layout programs. Then we draw from Photoshop or Fireworks, cut into small images. Finally, all designs restore all designs restore on the page by editing HTML.

If you want your HTML page with a CSS layout (CSS-friendly), you need to look back, you don't think about "look", you must first think about the semantics and structure of your page.

The appearance is not the most important. A good HTML page can be manifested in any appearance, CSS Zen Garden is a typical example. CSS Zen Garden helps us ultimately recognize the power of CSS.

HTML is not only on the computer screen. You may not be displayed on the PDA, mobile phone and screen reading machine with photoshop. But a good HTML page can be displaced anywhere, any network device.

Start thinking first, what is the "structure", some writers are also called "semantics". This term means you need to analyze your content block, and the purpose of each content service, and then establish a corresponding HTML structure based on these contents.

If you sit down and carefully analyze and plan your page structure, you may get a few pieces like this:

Sign and Site Name Main page Content Site Navigation (Main Menu) Sub-menu Search Box Ribbon (such as shopping cart, cashier) footer (copyright and related legal statements) We usually use DIV elements to define these structures, similar to this :

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 on the DIV. Any content block can be included in the DIV container, or another DIV can also be nested. The content block can contain any HTML element - title, paragraph, pictures, forms, lists, and more.

According to the above story, you already know how to structure HTML, now you can define the layout and style. Each content block can be placed anywhere on the page, then specify the color, font, border, background, and alignment property of this block.

Using the selector is the name of the wonderful thing ID is the means of controlling a block, by adding the DIV to this content block, you can use the CSS selector to accurately define each page element. Appearance performance, including title, list, picture, link, or paragraph, etc. For example, you can write a CSS rule for #header, you can completely different from the image rules in #content. Another example is: You can define link styles in different content blocks through different rules. Similar to this: #globalnav A: Link or #Subnav A: Link or #content A: Link. You can also define the style of the same element in different content blocks. For example, define the style of the P in #Content and #footer, respectively, by #content p and #footer p, respectively. Structurally, your page is composed of pictures, links, lists, paragraphs, etc., these elements do not have an impact on what network device displayed (PDA or mobile phone or network TV), they can be defined as Any performance appearance.

A careful structured HTML page is very simple, 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 the MARGIN rules for P add a CSS can achieve indentation purposes. P is structured tag, margin is a performance attribute, and the former belongs to HTML, which belongs to CSS. (This is the phase separation of the structure in the performance.)

There is almost no label for properties in the HTML page of a good structure. The code is very clean and simple. For example, the original code

, now you can write

, all control performance, all control performance In the structured HTML, Table is a table, not what else (such as being used to lay and position).

Practicing the structured structure above is just the most basic structure, in practical applications, you can adjust the content block as needed. There is often a case where DIV nesting will appear. You will see that there are other layers in the "Container" layer, the structure is like this:

Nested DIV elements allow you to define more CSS rules to control performance, for example: You can give a list of #navcontainer to let the list, give the #globalnav a rule to let the list, and give the #subnav's list another complete Different performances.

Replace the list of traditional methods with CSS will help you use CSS to replace traditional methods:

HTML attribute and corresponding CSS method HTML attribute 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 attribute, you must define a width to this floating element.

MarginWidth = "0" leftmargin = "0" marginheight = "0" TopMargin = "0" margin: 0; using CSS, margin can be set on any element, not just a body element. More important, you can specify an element separately Top, Right, Bottom and LEFT margin values. VLINK = "# 333399" Alink = "# 000000" LINK = "# 3333ff" A: Link # 3FF;

A: Visited: # 339;

A: HOVER: # 999;

A: Active: # 00f; In HTML, the link is defined as an attribute value of the Body. The link between the entire page is the same. With CSS selectors, the link styles of different parts of the page can be different.

BGColor = "# ffffff" Background-Color: #fff; in CSS, any element can define background colors, not just Body and Table elements.

BorderColor = "# ffffff" border-color: #fff; any element can set the border (BoEDER), you can define top, right, bottom, and left

Border = "3"

Cellspacing = "3" Border-Width: 3px; With CSS, you can define the border of Table as a unified 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.

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

clear: left;

CLEAR: Right;

Clear: Both; Many 2 columns or 3 layouts are located using the float attribute to locate. If you define a background color or a background image in the floating layer, you can use the CLEAR attribute.

Cellpadding = "3"

vSpace = "3"

Hspace = "3" Padding: 3px; use CSS, any element can set the padding property, similarly, Padding can set Top, Right, Bottom and LEFT, respectively. Padding is transparent.

Align = "center" text-align: center;

Margin-Right: auto; margin-left: auto; text-align is only available for text.

The block-level grievances such as DIV can pass margin-rot: auto; and margin-left: auto;

Some regrettable skills and work environments are not perfect for the browser support for CSS, and we sometimes have to take some techniques or build an environment (Workarounds) to make CSS achieve the same effect. For example, block-level elements are sometimes necessary to use the skills in the horizontal housing, and the skills of the box model BUG. All of these techniques are described in detail in Molly Holzschlag's article "Integrated Web Design: Strategies for Long-Term CSS Hack Management".

Another resource site about CSS is Big John and Holly Bergevin's "position is everything". Understand the "Containing Floats" of Floating Behavi Eric Meyer will help you master how to use the float property layout. Float elements sometimes need to be removed, reading "How to Clear Floats without Structural Markup" will be very helpful.

More "CSS Discussion" list is a good resource, which collected information of a Wikia discussion group, including CSS layout summary (css-discuss.incutio.com/?page=csslayouts), CSS skill summary (CSS-DISCUSS.INCUTIO.COM/?Page=csshack) and more

转载请注明原文地址:https://www.9cbs.com/read-133253.html

9cbs

New Post(0)