PHP.3-DIV+CSS standard page layout preparation (top)

DIV+CSS standard page layout preparation (top)

Overview

Using "Div+css" to lay out a Web site in a way that is typically used to illustrate the difference between how an HTML table is positioned. Because of the current web design standards, the use of table positioning technology is no longer used, but the use of div+css approach to achieve a variety of positioning. By using the div box model structure to divide the contents into different chunks, and then use CSS to define the box model location, size, border, internal and external margins, arrangement and so on. To put it simply, Div is used to build a website structure (frame), CSS for creating Web site performance (styling/landscaping). This standard simplifies the HTML page code, obtains a better website structure, facilitates the future website maintenance, works together and facilitates the search engine crawl. Of course, not all pages need to use div layout, such as data pages, reports and other pages, or the use of HTML tables will be more convenient, the Web standard does not say to abandon table. "W3c:http://baike.baidu.com/view/459077.htm"

The Web page consists mainly of three parts: structure (Structure), Performance (Presentation) and Behavior (Behavior). The corresponding standards are divided into three aspects: the structure standard language mainly includes XHTML and XML, the performance standard language mainly includes the CSS, the behavior standard mainly includes the object model (such as the ECMAScript DOM), and so on.

Advantages of the DIV+CSS standard

• Monetization and content separation

• Simple code to improve page browsing speed

• Easy maintenance and revision to reduce maintenance costs

• Improve indexing efficiency of search engines for web surfaces

Problems with layout site attention

The differences between browsers, even if the effect is not completely in different browsers, you have to do about one to

Install a variety of browsers, compare the differences to debug, mainly divided into Microsoft (IE) and non-Microsoft (Firefox).

For different versions of IE, you can test by installing the IETester "IE browser multi-version test Tool"

Firefox browser: Install Firebug "components in Firefox for debugging pages". Firebug provides you with a rich development tool that is readily available while browsing the web for your Firefox. You can edit, debug, and monitor the CSS, HTML, and JavaScript of any Web page in real time.

"Meaningless" element div and span

HTML is just a means of giving content, and most HTML tags have meaning (for example, tag p creates paragraphs, H1 tags create headings, etc.), but div and span tags don't seem to have any meaning in their content, sounding like a bubble-made hammer. But in fact, when combined with CSS, they are used extensively. All you need to remember is that the span and div are "meaningless" tags. Their existence is purely application style, so when the stylesheet fails it does not have any effect they are used to assemble a large chunk of HTML code and give certain information, most with the class attribute class and the IDENTITY property ID associated with the element. The difference between span and div is that span is inline and is used in a small piece of inline HTML. The DIV (division) element is block-level (simply, it is equivalent to a break before and after it), used to combine a chunk of code, providing the elements of the structure and background for chunks within an HTML document, which can contain paragraphs, headings, tables, and even other parts, which makes it easy to create different integrated classes. Everything between the start and end tags of a div is used to make up the block, where the attributes of the contained elements are controlled by the attributes of the div tag, or by formatting the block with a stylesheet.

Box model

Each HTML element can be thought of as a box with something in it, a box with a width (width) and height (height), a padding (padding) between the contents of the box and the box's border, and the box itself has a border (border), and the box border is outside the box, There are also margin "margins."

Main styles in layouts

? font?line-height?color?margin?padding?border?text-align?background?width:?height?float:?clear?display

Positioning properties

Properties	Description
Position	Used to define whether an element is absolute (absolute), relative (relative), static (static), or fixed (stationary)
Top	Distance of layer distance vertex ordinate
Left	The distance between the layer distance and the vertex axis
Width	The width of the layer, which can be specified with a length or "auto" value, with no negative values allowed
Height	The height of the layer, you can specify its height with a length or "auto" value, and negative values are not allowed
Z-index	Determines the order and coverage of the layer, and the element with the higher value overrides the element with the lower value
Display	is a display property that sets the block value to be displayed as a block, adding a newline character after the element, which cannot be displayed side by side with other elements. If you set the inline value inline, and you delete the line break after the element, multiple elements can be displayed side by side in a row. Using the value none turns off the display of the specified element and its child elements
Visibility	This property is set for nested layers, and if there is a nested layer (a child layer) and a nested layer (parent layer), you can use the inherit value to set the child layer to inherit the visibility of the parent layer, and if the parent layer is visible, the child layer is also visible. When the visible value is used, the child layer is visible regardless of whether the parent layer is visible. When the value is hidden, the child layer is hidden regardless of whether the parent layer is visible
Overflow	Used to set the extent to which content within a layer is handled beyond what the layer can hold, and when the visible value is set for the property, the content is displayed regardless of the layer size. When you set the hidden value, the content beyond the layer size is hidden. When the value is set to scroll, selecting this item adds a scroll bar to the layer, regardless of whether the content is outside the range of the layer. When the value uses the auto value, the scroll bar is displayed only when the content is outside the range of the layer

PHP.3-DIV+CSS standard page layout preparation (top)