Web standards: VI, HTML list

Web standards: VI, HTML list

Knowledge Points:

1.UL unordered and OL have sequence table 2. Change the bullet style or define a bullet with a picture 3. Horizontal graphic list 4. Floating stepfather Container height adaptive 5.ie6 double margin bug 1) UL unordered and OL ordered list unordered list: is in the form of UL contains Li, the symbol before each line is a dot, You can change the style to none, block, hollow Circle, and so on.  There are sequence lists: In the form of ol containing Li, which are numbered bullets, unordered list pages can be displayed as ordered tables with CSS definitions. 2) Changing the bullet style or defining a bullet with a picture the UL bullet is a dot by default, and you can change its style through the style sheet. 1. Change by changing the CSS style of the UL (refer to Tutorial: http://wenku.baidu.com/view/a2fe244dc850ad02de804163.html)properties of the List-style-type:None: Do not use bullets disc: Solid Circle (default) Circle: Hollow Circle Square: Solid square Decimal: Arabic numerals lower-roman: lowercase roman numerals Upper-roman: uppercase Roman numerals Lower-alpha: lowercase English letters Upper-al PHA: Uppercase English alphabetList-style-image:Replace the item as a picture, note: When this happens, the List-style-type property 2 is overwritten by default. The first method is not particularly flexible, the actual application is generally used in the background image to achieve. Description: No-repeat refers to a picture that is not repeated and displayed only once.          0px 4px is the distance between the distance is 0px, up and down the distance is 4px. Add Padding-left is to let the text move to the right 25px, otherwise it will coincide with the picture. 3) Horizontal graphic list of horizontal graphic list mainly used to Float:left; set a width for Li, and set the Float:left; Note: Because we have added a border to the IMG, so the height will be higher 4px, so we must give Li a height, otherwise the current selected Li is too high, resulting in a floating problem of the following line, the specific problem style see: 4) Floating stepfather container height adaptive when the element inside a container floats, its height will not increase with the height of the inner element, so the content element is displayed beyond the container, for easy viewing, we add a border to the container, Display such as: And this time we just add a style to the container overflow:auto; You can solve this problem. Note: Overflow has other properties besides auto, such as scroll, which are displayed as rollers, but must be given a height for the container when using scroll. 5) IE6 Double margin Bug This is IE6 another famous bug, such as the above example, when floating set the left margin, the leftmost side will be displayed as double margin, such as setting 20px, and in IE6 display as 40px, solve this problem only need a style, display:inline No style before IE6: Add this style to solve the problem of double spacing on the left.

Web standards: VI, HTML list