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

<p> 
</p>

 
• 首页
 
•  
• 博客
 
•  
• 设计
 
•  
• 相册
 
•  
• 论坛
 
•  
• 关于
 

 

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;}

• 这里是列表内容
• 这里是列表内容
• 这里是列表内容

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!