Home > Article > Web Front-end > How to set up an unordered list in css? CSS list style summary
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:
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:
<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!