How to set up an unordered list in css? CSS list style summary-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set up an unordered list in css? CSS list style summary

Sep 06, 2018 pm 01:41 PM

css list-style-type unordered list

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>

Copy after login

This is a relatively simple code. Let’s first take a look at the display effect in the browser:

How to set up an unordered list in css? CSS list style summary

#All five effects are displayed. Isn't it very simple? (If you want to know more about CSS styles, go to the PHP Chinese website

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

The last one is more commonly used now. If you don’t want to write too much code, you can Use this consistent writing method to simply complete these. Let's look at an example:

<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style>

Copy after login

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 set up an unordered list in css? CSS list style summary

The effect is very obvious, isn’t it? We just removed all these lists. Of course, this is only the most basic compliance. Writing method, you can also write other attribute styles, so that you can save more time.

Okay, that’s the summary of this article about CSS list styles. If you have any questions, you can ask below.

【Editor’s Recommendation】

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!

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