Home > Article > Web Front-end > Regarding the issue of list-style modifying the list attribute in CSS to control the li tag style
Regarding the issue of list-style modifying the list attribute in CSS to control the li tag style
- 不言Original
- 2018-06-11 14:50:192320browse
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>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!