About CSS control style analysis of UL LI

This article mainly introduces about the CSS control of the UL LI style analysis, has a certain reference value, now share to everyone, the need for friends can refer to

P+CSS, we use the most is UL Li to display data, such as news buttons. Below to give you a CSS ul Li example for learning

<p id= "Menu" > <ul> <li><a href= "#" > Home </a></li> <li class= "Menup" ></li > <li><a href= "#" > Blog </a></li> <li class= "Menup" ></li> <li><a href= "# "> Design </a></li> <li class=" Menup "></li> <li><a href=" # "> Album </a></li > <li class= "menup" ></li> <li><a href= "#" > Forum </a></li> <li class= "Menup" ></li> <li><a href= "#" > About </a></li> </ul> </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 is the point of canceling the list, because we don't need these points.
margin:0px, this sentence is to remove the indentation of UL, so that you can make all the list content is not indented.

#menu ul li {float:left;}

The float:left around here is to let the content be displayed on the same line, so the float property (float) is used.

A detailed description of the UL and Li Styles in CSS

The UL and Li lists are commonly used elements when using CSS to layout pages. In CSS, there are properties that specifically control the performance of the list, often with List-style-type properties, List-style-image properties, List-style-position properties, and List-style attributes.

　　First, List-style-type properties

The List-style-type property is used to define the bullets of the Li list, which is the decoration in front of the list. The List-style-type property is an inheritable property. The syntax structure is as follows: (Enumerate some common property values)

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

There are a lot of property values for the List-style-type property, and here we just list some of the more common ones.

None: bullets are not used. Disc: Solid Circle. Circle: Hollow Circle. Square: solid block. 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 property is as follows:

Li{list-style-type:square;} <ul><li> here is the list content </li><li> here is the list content </li><li> here is the list content </li></ul>

The style is applied to the page as shown in the effect.

　　Second, List-style-image properties

The List-style-image property is used to define the use of pictures instead of bullets. It is also an inheritable property with the following syntax structure:

List-style-image:none/url

The List-style-image property can take two values:

None: There are no pictures to replace. URL: The path to replace the picture.

Take a look at the code:

Li{list-style-image:url (images/bg03.gif);} <ul><li> here is the list content </li><li> here is the list content </li><li> here is the list content </li></ul>

Effects such as.

　　Third, List-style-position properties

The List-style-position property is a property that defines where bullets are displayed in a list. It is also an inheritable property with the following syntax structure:

List-style-position:inside/outside

Inside: bullets are placed within the text. Outside: Bullets are placed outside the text.

An example of using the List-style-position property is as follows:

Li{list-style-type:square;list-style-position:outside;} <ul><li> Here is an example using the List-style-position property value of outside. Note the position of the bullet after the line break. </li><li> here is the list content </li><li> here is the list content </li></ul>

The effect is as shown.

Then look at the style of the property value inside.

Li{list-style-type:square;list-style-position:inside;} <ul><li> Here is an example using the List-style-position property value of inside. Note the position of the bullet after the line break. </li><li> here is the list content </li><li> here is the list content </li></ul>

　　Iv.. List-style Properties

The List-style property is an attribute that sets the Li style synthetically, and is an inherited property, with the following syntax:

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

The position of each value can be exchanged. Like what:

Li{list-style:url (images/bg03.gif) inside;} <ul><li> Here is an example of using the List-style property. Note the position of the bullet after the line break. </li><li> here is the list content </li></ul>

You can look at the effect applied to the page.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!