CSS如何设置列表样式属性，看这篇文章就够用了
列表样式属性
- 在
HTML中有2种列表、无序列表和有序列表，在工作中无序列表比较常用，无序列表就是ul标签和li标签组合成的称之为无序列表，那什么是有序列表呢？就是ol标签和li标签组合成的称之为有序列表，列表的基础知识就简单说明下，本章内容主要说明的是如何给列表设置样式，若有不懂列表是什么的园友笔者建议去W3school官网进行学习。 - 列表样式常用的属性有4种如：
list-style-type、list-style-position、list-style-image、list-style，在这里就是简单说明下列表常用的属性名称而已，具体使用或每一个属性值的介绍，在下面会具体的说明，爱学习的园友不用担心哦。
list-style-type属性
list-style-type属性作用:就是设置列表前面项目符号的类型。list-style-type属性值说明表。
| 属性值 | 描述 |
|---|---|
| none | 将列表前面项目符号去除掉。 |
| disc | 将列表前面项目符号设置为实心圆。 |
| circle | 将列表前面项目符号设置为空心圆。 |
| square | 将列表前面项目符号设置为实心小方块。 |
属性值为none使用方式
让我们进入列表的
list-style-type属性值为none实践，实践内容如：使用class属性值为.box将列表前面项目符号去除掉。我们在实践列表的
list-style-type属性值为none之前看看列表前面项目符号是什么，让初学者有一个直观的印象。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type属性值为none实践</title>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
现在爱学习的园友们知道了什么是列表前面的项目符号了，那我们就进入列表的
list-style-type属性值为none实践咯。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type属性值为none实践</title>
<style>
.box{
list-style-type: none;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
- 既然能看到这里说明园友已经掌握了，列表的
list-style-type属性值为none使用，恭喜恭喜恭喜。
属性值为disc使用方式
- 在这里说明下列表的
list-style-type属性值为disc，列表的list-style-type属性值默认就是disc，如果是细心的园友已经发现了，上面有现成的列子在这里就不过多的介绍了，这个属性值为disc就跳过了哈。
属性值为circle使用方式
- 让我们进入列表的
list-style-type属性值为circle实践，实践内容如：将列表前面的项目符号设置为空心圆。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type属性值为circle实践</title>
<style>
.box{
list-style-type: circle;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
属性值为square使用方式
- 让我们进入列表的
list-style-type属性值为square实践，实践内容如：将列表前面项目符号设置为实心方块。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type属性值为square实践</title>
<style>
.box{
list-style-type: square;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
list-style-position属性
list-style-position属性作用：设置列表前面项目符号的位置，list-style-position属性有2个属性值，分别是outside、inside，具体说明看下面的属性值说明表。
list-style-position属性值说明表
| 属性值 | 描述 |
|---|---|
| outside | 将列表前面项目符号设置在外面。 |
| inside | 将列表前面项目符号设置在里面。 |
属性值为outside使用方式
在实践
list-style-position属性值为outside之前，我们先看看列表前面的项目符号的默认位置在哪，笔者为了让初学者有一个直观的印象，笔者将HTML页面中的ul标签li标签设置了一些样式。ul标签样式如：：width宽度设置为300px像素、height高度为150px像素、border边框为（1px像素、显示是实线、边框颜色为蓝色）、样式。ul标签中的li标签设置样式如：width宽度设置为280px像素、height高度为30px像素line-height行高为30px像素、border边框为（1px像素、显示是实线、边框颜色为红色）、样式。如果园友没有掌握
border边框的知识，爱学习的园友不用担心以后会写border边框的文章，若有想了解border边框知识的园友可以去W3school官网进行学习。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
- 现在大家应该很清楚的看到了列表前面项目的符号默认在
ul标签和li标签之间的位置，现在我们知道了列表前面的项目符号的默认位置，那我们进行list-style-position属性值为outside实践了，实践内容：将HTML页面中的列表前面的项目符号设置为外面。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: outside;
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
注意：为什么给列表设置了
list-style-position属性值为outside，运行结果没有发生任何变化呢，因为列表前面的项目符号默认就在外面的位置，列表前面的项目符号外面的位置就是ul标签和li标签之间的位置。
属性值为inside使用方式
- 通过介绍
list-style-position属性值为outside，大家已经知道了列表前面项目符号外边的位置了，接下来我们将列表前面项目符号设置在里面咯。 - 让我们进入
list-style-position属性值为inside实践，将列表前面项目符号位置设置在里面。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性值为inside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
- 注意：
list-style-position属性值为inside作用就是将列表前面项目符号位置设置在li标签中，这就是里面的位置。
list-style-image属性
list-style-image属性作用：将列表前面项目符号设置为一张图片。
list-style-image属性说明表
| 属性值名称 | 描述 |
|---|---|
| url | 设置列表前面项目符号的图片的路径 |
让我们进入
list-style-image属性的实践，实践内容将列表前面项目符号更换一张图片。代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用list-style-image属性方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-image: url(./img/001.png);
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
注意：图片路径一定要写在
url(./img/001.png);括号当中，不然不会被渲染的，图片路径可以是相对路径也可以绝对路径。
list-style属性
list-style属性是（list-style-type属性、list-style-position属性、list-style-image属性）的一个简写属性，它集成了（list-style-type属性、list-style-position属性、list-style-image属性）的功能。- 让我们进入
list-style属性实践，既然看到了这里想必园友都已经掌握了本章的内容了。 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用list-style属性方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 290px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style: none inside url(./img/001.png) ;
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
<li>成功不是打败别人，而是改变自己。</li>
</ul>
</body>
</html>
结果图
注意：
list-style属性值可以也1个或2个3个，顺序没有要求，若有不明白的园友可以做个实例看看就明白了，学习就要多尝试不要偷懒呦。
CSS如何设置列表样式属性，看这篇文章就够用了的更多相关文章
- CSS如何设置列表样式属性
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- CSS中如何使用背景样式属性，看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
- CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- css中的列表样式
在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...
- CSS Ul（列表样式）
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
随机推荐
- SSH通道来访问MySQL
许多时候当要使用Mysql时,会遇到如下情况: 1. 信息比较重要,希望通信被加密.2. 一些端口,比如3306端口,被路由器禁用. 对第一个问题的一个比较直接的解决办法就是更改mysql的代码,或 ...
- python类的__repr__方法
python3中的类默认是新式类(继承object类). __repr__()是 Python 类中的一个特殊方法,由于 object 类己提供了该方法, 而所有 的 Python 类都是 objec ...
- Python网络爬虫——Appuim+夜神模拟器爬取得到APP课程数据
一.背景介绍 随着生产力和经济社会的发展,温饱问题基本解决,人们开始追求更高层次的精神文明,开始愿意为知识和内容付费.从2016年开始,内容付费渐渐成为时尚. 罗辑思维创始人罗振宇全力打造" ...
- 07 python学习笔记-写一个清理日志的小程序（七）
#删掉三天前的日志 #1.获取到所有的日志文件, os.walk #2.获取文件时间 android 2019-09-27 log,并转成时间戳 #3.获取3天前的时间 time.time() - 6 ...
- any_value()函数
转载自:https://blog.csdn.net/Peacock__/article/details/90608246 MySQL5.7之后,sql_mode中ONLY_FULL_GROUP_BY模 ...
- ulua、tolua原理解析
在聊ulua.tolua之前,我们先来看看Unity热更新相关知识. 什么是热更新 举例来说: 游戏上线后,玩家下载第一个版本(70M左右或者更大),在运营的过程中,如果需要更换UI显示,或者修改游戏 ...
- CSPS模拟 98
T1 待改 T2 这道题的爆炸充分说明我最近已经颓到一定境界了 考虑到总步数不可能超过n 直接枚举总步数,那么任意时刻对末态的影响就是确定的 T3 两遍最短路,一遍从-1的限制考虑求出允许的最早时间, ...
- 三分钟学会Redis在.NET Core中做缓存中间件
大家好,今天给大家说明如何在.NET Core中使用Redis,我们在想要辩论程序的好与坏,都想需要一个可视化工具,我经常使用的是一位国内大牛开发的免费工具,其Github地址为: https://g ...
- 使用Typescript重构axios(二十七)——添加请求状态码合法性校验
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 「动态规划」-数位dp专题
数位dp,今天学长讲的稍玄学,课下花了一会时间仔细看了一下,发现板子是挺好理解的,就在这里写一些: 数位dp主要就是搞一些在区间中,区间内的数满足题目中的条件的数的个数的一类题,题目一般都好理解,这时 ...