Introduction to using CSS custom list items list-style

Today I will create a recruitment page for a company. I finish the design drawings in the morning and start typesetting in the afternoon. The page copied the recruitment page of a talent bureau that I created before, and the navigation bar and banner came out quickly. I have used lists in some places in this content, and of course I have to use

• tags. The list items (small dots) are made into small green squares. At this time, I thought if there was a CSS property for customizing the list items. No need to know, it really does exist. list-style can define list-style-type, list-style-position and list-style-image. These three attributes can be written together. list-style-image is exactly the custom list item pattern.

  Before I started defining them, I encountered two problems: 1. The small dots in the default style of the

• tag were missing. After checking, I found that the initialization style sheet
  defined list-style: none, which caused the default small dots to be removed. Then we need to define the list-style of
  . 2. List-style-position has two optional values: insite and outsite. There is no problem when using insite (list items are inside the line), but when using outsite (list items are outside the line), the small dots disappear. It turns out that the initialization style sheet defines

  as overflow: hidden, and the part that overflows

  will be cut off. And

  is contained in

  , so

  cuts off the overflowing list items. Just define

  as the default visible here.

  You can start customizing the list pattern. First, cut the pattern out of PS and save it in the designated location. Define list-style-image: url(i/icon.gif). The problem is, the pattern is not horizontally centered with the text. Baidu, Japan

  • needs to set a fixed height, setting it is useless. After careful inspection, it turns out that predecessors have already had experience with custom patterns: Option 1, include a blank space at the bottom when cutting the list item pattern. This plan must ensure that the blank space of the pattern is consistent with the background color of the page. I think this solution is not elegant because the font may become larger or smaller and therefore cannot be reused. Option 2, use the background attribute to customize the item list pattern. This solution can flexibly control the position of the pattern, and the spacing between the text and the pattern is also easy to control (I will not tell you to use padding to control the spacing). To sum up, it actually makes sense for the initialization style sheet to remove the default dots of
  • . First, in most cases, list items are not used. Second, using list-style to customize list items is really difficult to control.

The above is the detailed content of Introduction to using CSS custom list items list-style. For more information, please follow other related articles on the PHP Chinese website!