CSS Custom list Item List-style usage Introduction

Give a company a job page today. Finish the plan in the morning and start typesetting in the afternoon. The page applied the recruitment page of a talent bureau I had done before, the navigation bar, Banner soon came out. I have a list of places to use in this content, of course <ul> <li> tags. List items (dots) made of small green squares, when I think there is a CSS property used to customize list items. You don't have to know, it really is. List-style It is possible to define List-style-type, List-style-position, and List-style-image, which are three properties that can be written together. List-style-image is the custom list item pattern.

Before I started defining them, I ran into two questions: 1, <li> the default style dot is missing. When viewed, it is found that initializing the style sheet <ul> defining the List-style:none causes the default small dots to be removed. That requires us to define the list-style of <ul>. 2, List-style-position has two optional values: Insite and Outsite, using Insite (list items in line) No problem, but using outsite (list items outside the row), the small dot is missing. The original is also because of the initialization style sheet, it defines <p> overflow:hidden, overflow <p> that part will be cut off. <ul> is included in <p>, so <p> cuts out the overflow list items. Here is the definition of <p> default visible.

The

can begin customizing the list pattern. First, cut the pattern from the PS and save it in the specified position. Define List-style-image:url (I/icon.gif). The problem is that the pattern is not centered with the text horizontally. Baidu, the day <li> need to set a fixed height, set it, useless. Carefully re-check, the original predecessors on the custom pattern early experience: scenario 1, the list item pattern transduction include the bottom of the white, the scheme to ensure that the pattern is left white and the page color consistent. I think this scheme is not elegant because the font size may become larger and smaller therefore, it cannot be reused. scenario 2, customize the project list pattern with the Background property. This scheme has the flexibility to control the position of the pattern, and the spacing between the text and the pattern is easy to control (I won't tell you to control the spacing with padding). To summarize, it makes sense to initialize the style sheet to remove the <li> default dot. First, in most cases, the list item is not used. Second, using List-style to customize list items is really not good for control.