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

csslist-style-typeunordered 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>

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>

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

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

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)