Analysis of CSS controlling the styles of ul and li (code)

The content of this article is about the analysis (code) of CSS control of ul and li styles. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The code is as follows:

<div id="menu"> 
<ul> 
<li><a href="#">首页</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">博客</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">设计</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相册</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">论坛</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">关于</a></li> 
</ul> 
</div>

CSS:

The code is as follows:

#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 to cancel the points before the list, because we do not need these points.
margin:0px, this sentence is to delete the indentation of UL. This can prevent all list contents from being indented.

#menu ul li {float:left;}

The left and right sides of float:left here are to display the content 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 modification in front of the list. The list-style-type attribute is an inheritable attribute. Its grammatical 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;}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

2. List-style-image attribute

list-style-image Property 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

list-style-image attribute can take two values:

none: There is no replaced 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>

3. List-style-position attribute

list-style-position attribute is used Properties that define where the bullet appears in the list. 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>

Let’s take a 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>

4. List-style attribute

The list-style attribute is an attribute that comprehensively sets the li style. It is also an inheritable attribute. 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>

[Related recommendations: CSS video tutorial]

The above is the detailed content of Analysis of CSS controlling the styles of ul and li (code). For more information, please follow other related articles on the PHP Chinese website!