About the style analysis of css control UL LI

This article mainly introduces the style analysis of css control UL LI, which has a certain reference value. Now I share it with you. Friends in need can refer to

p In CSS, we use The most common ones are ul li to display data, such as news buttons, etc. Here is an example of css ul li for everyone to learn

ec9f6427073c7877b763877a98de2cdd 
ff6d136ddc5fdfeffaf53ff6ee95f185 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812博客5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812设计5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812相册5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812论坛5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
88e04aaaafdbe45d6ad5c2fcc5b754d4bed06894275b65c1ab86501b08a632eb 
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812关于5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
929d1f5ca49e04fdcb27f9465b944689 
94b3e26ee717c64999d7867364b1b4a3

CSS:

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;}

Explain:

#menu ul {list-style:none;margin:0px;}

list-style: None, this sentence is the point before canceling the list, because we don't need these points.
margin:0px, this sentence is to delete the indentation of UL. This can make all list contents unindented.

#menu ul li {float:left;}

The left and right of float:left here allow the content to be displayed on the same line, so the floating attribute (float) is used.

Detailed explanation of ul and li styles in CSS

ul and li lists are commonly used elements when using CSS to layout pages. In CSS, there are attributes that specifically control list performance. Commonly used attributes include list-style-type attributes, list-style-image attributes, list-style-position attributes, and list-style attributes.

　1. List-style-type attribute

The list-style-type attribute is used to define the bullet of the li list, that is, the bullet in front of the list Grooming. The list-style-type attribute is an inheritable attribute. Its syntax structure is as follows: (List some commonly used attribute values)

List-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

There are many attribute values ​​for the list-style-type attribute. Here we only list a few of the more commonly used ones.

none: Do not use bullet points. disc: solid circle. circle: hollow circle. square: solid square. demical: Arabic numerals. lower-alpha: lowercase English letters. upper-alpha: uppercase English letters. lower-roman: lowercase Roman numerals. upper-roman: uppercase Roman numerals.

The sample code for using the list-style-type attribute is as follows:

li{
list-style-type:square;}
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6这里是列表内容bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

The effect of applying this style to the page is as shown below.

　2. List-style-image attribute

The list-style-image attribute is used to define the use of pictures instead of bullets. It is also an inheritable attribute, and its syntax structure is as follows:

list-style-image:none/url

The list-style-image attribute can take on two values:

none: No replacement image. url: The path of the image to be replaced.

Let’s look at a piece of code:

li{
list-style-image:url(images/bg03.gif);}
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

The effect is as shown below.

　三、list-style-position attribute

　The list-style-position attribute is used to define the bullet in the list Displays the location properties in . It is also an inheritable attribute, and the syntax structure is as follows:

List-style-position: inside/outside

inside: The bullet is placed inside the text. outside: Bullets are placed outside the text.

An example of using the list-style-position attribute is as follows:

li{
list-style-type:square;
list-style-position:outside;}
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

The effect is as shown in the figure below.

Let’s look at the style with the attribute value inside.

li{
list-style-type:square;
list-style-position:inside;}
<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

　IV. List-style attribute

The list-style attribute is an attribute that comprehensively sets the li style, and it is also an attribute that can be inherited Attributes, the syntax structure is as follows:

li-style:list-style-type/list-style-image/list-style-position

The positions of each value can be exchanged. For example:

li{
list-style:url(images/bg03.gif) inside;}
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

You can see the effect of applying it to the page.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

The difference between word-break, word-wrap, and white-space in forced line breaks in css

Use CSS to customize the style of the green checkbox button

The above is the detailed content of About the style analysis of css control UL LI. For more information, please follow other related articles on the PHP Chinese website!