Enterprise website Comprehensive layout actual combat

Site Distribution

Head logo, navigation area, content display, bottom copyright

• Box Model review

• Div is a block-level element that will be a different line
• Span inline elements

Block-level elements own a row, cannot have other elements and he is on the same line

Floating box out of document flow, not occupying normal document position

• Page Head decomposition

• Set the contents of the box to be centered in the horizontal direction: Text-align:center

Center vertically, set line height line-height equal to box

Hyperlink: A:link Initial state

After the a:visited visit

A:hover hover over state

A:active Click Status

A tag is an inline element with no height and width properties, so controlling the mouse over state changes the background color, only the background color is displayed where there is text. The solution is to turn a tag into a block-level element, Display:block

• Focus Map, the homepage of the website dynamic diagram

Can use JS focus map, Myfocus JS Library

Download the library first

Referenced in HTML, respectively, library file, style file

Overflow:hidden, beyond the size of the box is hidden

The function that references myfocus in script, ID is the same as the outer ID of the box, and must contain a div with a class of pic outside the picture list.

• Information Display Area

span inline element, not block-level element, so does not start another row, using Display=block to convert inline elements into block elements

Inline elements do not have a high-width concept, so the background is only in the text section, if you want to enlarge the background range, convert to block elements

Span itself is an inline element, but it becomes a block-level element after it has been floated, so it is automatically wrapped, and the top of a floating element cannot be higher than the top of a floating element or paragraph before it appears.

Background-position:x y; x is the horizontal direction, y is the vertical direction, indicating the position of the upper-left corner of the background picture relative to the object, which can be understood as absolute positioning, the upper-left corner of the object x pixels, and the upper-right corner of the object y pixels.

Http://www.w3school.com.cn/cssref/pr_background-position.asp

Min-height: Minimum height, IE6 not supported

_height: Compatible with IE6, min. height

Display:inline-block, converted to inline block elements. Inline block elements have some characteristics of inline elements and blocky elements

Text-indent: Paragraph indentation, text-indent is used to specify the indentation of the text block in the first line, but PX is absolute unit, 20px is not necessarily exactly two characters, and EM is relative units, 1em is the size of the current 1 font, so 2em is exactly two characters. Another hint: The value of text-indent allows negative values, so you can write text-indent:-9999px if you want to hide the text in a Div.

Enterprise website Comprehensive layout actual combat