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>
.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">
html ul标签<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使⽤⽅式
1. 通过介绍list-style-position属性值为outside，⼤家已经知道了列表前⾯项⽬符号外边的位置了，接下来我们将列表前⾯项
⽬符号设置在⾥⾯咯。
2. 让我们进⼊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>
结果图
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论