Home >Web Front-end >CSS Tutorial >How to set up an unordered list in css? CSS list style summary
How to set up an unordered list in css? CSS list style summary
- 寻∝梦Original
- 2018-09-06 13:41:0610776browse
How to set the style of unordered list in cssDo you know? Here are the detailed applications of unordered lists, removing these icons and the like, and also introducing the introduction of removing small dots to add pictures. You can try it yourself. Let’s take a look at this article now
First let’s take a look at the unordered list:
- We all know that unordered lists Sequence lists are usually replaced by small dots, but sometimes small dots do not look good. In order to increase the aesthetics, there are several styling methods in CSS styles. The first one: of course, the default in the unordered list. Small dots
- The second type is to change the small dots into small squares for display
- The third type is to change the small dots to small squares Change it to a hollow circle to display
- The fourth method is to remove the small dots. This should be more commonly used.
- The fifth method: which is also less commonly used, is to program an unordered list into an ordered list, with numbers in front
Now let’s take a look at the complete code for these five css styles:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
.zhe1{list-style-type:disc;}
.zhe2{list-style-type:square;}
.zhe3{list-style-type:circle;}
.zhe4{list-style-type:none;}
.zhe5{list-style-type:decimal;}
</style>
</head>
<body>
<ul>
<li class="zhe1">我是默认小圆点</li>
<li class="zhe2">我是小方块</li>
<li class="zhe3">我是空心圆</li>
<li class="zhe4">我是没有标记的</li>
<li class="zhe5">我是要有序列表</li>
</ul>
</body>
</html> This is a relatively simple code. Let’s first take a look at the display effect in the browser: 
css Reference Manual column to learn)
Now let’s talk about CSS’s summary of list styles:
- list-style-image: The url image address attribute uses an image to replace the mark of the list item;
- list-style-position attribute Sets where to place the list item mark; there is also a value inside: placed within the text.
- list-style compound writing method
<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style>This css style, plus this, can remove those unwanted things, and can also write other attributes, just this Let’s take a look at the effect: 
How to customize fonts in css? Introduction to text font styles in html
#How to set the character spacing in html? css style setting text alignment summary
The above is the detailed content of How to set up an unordered list in css? CSS list style summary. For more information, please follow other related articles on the PHP Chinese website!