CSS: Detailed explanation of the difference between list-style-type and list-style-image
Release： 2017-06-29 13:40:25
Original
2578 people have browsed it
CSS List
In an unordered list
, the mark of the list item is the dot that appears next to each list item.
In a sequence list
, the symbol may be a letter, a number, or a symbol in some other counting system.
list-style-type：List
style attribute
##
ul.circle {list-style-type:circle} /*无序原点marker*/ ul.square {list-style-type:square} /*无序方点marker*/ ol.upper-roman {list-style-type:upper-roman} /*大写罗马排序*/ ol.lower-alpha {list-style-type:lower-alpha} /*小写字母排序*/
Copy after login
/*其他属性值：*/
Copy after login
/*‘disc’是实心圆------‘decimal'阿拉伯数字-----'lower-roman'小写罗马--lower-latin小写拉丁----upper-latin大写拉丁*/
Copy after login
Type circle:
- Coffee
- Tea
- Coca Cola
Type square:
- Coffee
- Tea
- Coca Cola
Copy after login
Type upper-roman:
- Coffee
- Tea
- Coca Cola
Type lower-alpha:
- Coffee
- Tea
- Coca Cola
Copy after login
list-style-imageUsage:
Running effect:
![]()
This attribute specifies an image as a symbol for an ordered or unordered list item. The position of the image relative to the content of the list item is usually controlled using the
list-style-position
attribute.
Note: Please always specify a "list-style-type" attribute in case the image is not available and can still be displayed as a list with a
marker.
This attribute specifies an image as a symbol for an ordered or unordered list item. The placement of the image relative to the list item's content is typically controlled using the list-style-position property.
Note: Always specify a "list-style-type" attribute in case the image is not available.
In actual use, for convenience, the above three attribute values can be combined into list-style, for example:
li {list-style : url(example.gif) square inside}
Copy after login
The values of list-style can be listed in any order, and as long as one value is specified, other values will be listed with default values. The default value of list-style-type is "disc" list-style- The default value of position is "outside"
The above is the detailed content of CSS: Detailed explanation of the difference between list-style-type and list-style-image. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
