Regarding the issue of list-style modifying the list attribute in CSS to control the li tag style-CSS Tutorial-php.cn

Regarding the issue of list-style modifying the list attribute in CSS to control the li tag style

不言

Release： 2018-06-11 14:50:19

Original

2387 people have browsed it

This article mainly introduces the issue of modifying the list attribute in CSS to control the li tag style. It has a certain reference value. Now I share it with you. Friends in need can refer to it

list_style Attributes are used to modify the attributes of the list, list-style-type is used to set the list item type, list-style-position is used to set the position of the list item, list-style-image is used to set the use of images to replace the list item mark

list_style attribute is used to modify the attributes of the list

The format is as follows:
list_style: list item mark type list item mark position list item mark;
can also be used alone Set the list item mark:
list-style-type is used to set the list item type:
The default value is disc, which is a solid circle,
Common values: none empty
circle hollow circle
square solid Square
decimal numbers
lower-latin lowercase Latin letters a, b, c....
upper-latin uppercase letters A, B, C....
list-style-position Used to set the position of this list item:
The default value outside means outside the li tag. This is to add a border to li: 1px solid red; you can see the position of the mark.
inside means that the mark is inside the li tag, which can be clearly seen when adding a border.
list-style-image is used to set the use of images to replace list item tags:
Default value: none
Optional value: URL, the format is url("url address");
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

Copy after login

Specify a "list-style-type" attribute in case the image is not available.

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 and priority between href and onclick usage in the a tag of Html

How to use CSS3 Linear gradient linear-gradient makes border

The above is the detailed content of Regarding the issue of list-style modifying the list attribute in CSS to control the li tag style. For more information, please follow other related articles on the PHP Chinese website!