Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of the attributes of the CSS list, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

CSS list

In a sense, anything that is not a descriptive text can be regarded as a list. The population census, the solar system, genealogy, the full menu, and even your full friendliness can all be shown as a list, about a list.

Because the list is so diverse, it makes the list equal, so it is actually a pity that the list is not very rich in CSS.

List type

The easiest (and most false) way to influence the name of a list is to change its logo type.

For example, in an unordered list, the symbol (marker) of a list item is the dot that appears next to each list item. In an ordered list, identification marks are mostly letters, numbers, or a symbol in some other counting system.

To fix the type of symbol used for list items, use the attribute list-style-type:

Ul {list-style-type: square}

The above declaration sets the list item tag in the unordered list to a square.

List item image

Occasionally, the symbols of the old rules are insufficient. You may want to use an image for each logo, which can be done by manipulating the list-style-image property:

Ul li {list-style-image: url (xxx.gif)}

Simply use a url () value to use the image as the identification table flag.

List identification table logo identity

CSS2.1 can always be marked outside the original list item content or inside the content. This is implemented by dominating list-style-position.

Abbreviated list pattern

For simplicity, you can separate the above three list style properties into a handy property: list-style, like how:

Li {list-style: url (example.gif) square inside}

The values of list-style can be listed by any action, and these values can be ignored. Only one value is provided, and the rest will fill in its default value.

Thank you for reading this article carefully. I hope the article "sample Analysis of CSS list attributes" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.