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

This article will explain in detail what list-style means in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I. the function and use of list-style

List-style is the style that sets the list li. For example, li is preceded by Arabic numerals, dots, solid circles, pictures, hollow circles, lowercase English letters, uppercase English letters, traditional Armenian numerals, etc.

II. Grammar

1. Grammar:

List-style:list-style-image | | list-style-position | | list-style-type

We know that the html syntax states that li must be used within ul or ol, so for ul or ol, you can set list-style-image to introduce pictures as the front layout material of li. But usually divcss layout does not use this method to set the front picture material of li, and usually sets the background image directly to li, which is more compatible and easier to control.

We use the list-style-type property, which is mostly list-style, to set the li default front style.

2. The value and interpretation of list-style-type

Below, you can come down to test and see the effects of various values.

Parameters:

Wechat screenshot _ 20181122145030.png

III. General practice of layout

Usually at the beginning of a page layout CSS will remove the ulolli three list list-style style, but also in order to be compatible with major browsers, cancel the list tag default list-style.

Cancel the list-style style code for ulliol:

Ul,ol,li {list-style:none}

Set a dot in front of the list in the web page, and then set the Background background image to the li.

1. The code is as follows:

Ulli layout instance

Ul,ol,li {list-style:none;margin:0;padding:0;normal;font:14px/24pxArial}

Php.cn-1

Php.cn-2

Php.cn-3

The effect is as follows:

2. Explanation

Above, remove the default list-style style of liulol, and set mragin and padding to 0, font size to 14px, and line height to 24px. Why not use li with list-style-type to set the dot effect?

This is the end of the article on "what is the meaning of list-style in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.