Div + CSS layout

xiaoxiao2021-04-08 369

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

When we just learned the webpage, we always consider how to design, consider those pictures, fonts, colors, and layout solutions. 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

The first thing to learn is "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)

Submenu

search bar

Ribbon (such as shopping cart, cashier)

Footers (copyrights and relevant 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.

Use the selector is a wonderful thing

The name of the 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 the appearance of each page element, including title, list, Pictures, links or paragraphs, 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

in HTML, all control performance things are written to CSS, in the structure In HTML, table is a table, not what else (for example is used to lay out 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 traditional method with CSS

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

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 a property value of 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 locked using the float attribute. 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

Since the browser is not perfect for CSS support, we have to take some techniques (Hacks) or build a 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 floating behavior

Eric Meyer's "Containing Floats" 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 help

The existing "CSS Discussion" list is a good resource. It collects information of a Wikia discussion group, including CSS layout summary (css-discus.incutio.com/?page=csslayouts), CSS skill summary (CSS- Discuss.incutio.com/?page=csshack and more

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

9cbs

New Post(0)