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 ...

随机推荐

kaldi使用cvte模型进行语音识别
操作系统 : Unbutu18.04_x64 gcc版本 :7.4.0 该模型在thch30数据集上测试的错误率只有8.25%,效果还是不错的. 模型下载地址: http://www.kaldi-as ...
Java8系列 (一) Lambda表达式
函数式编程在介绍Lambda表达式之前, 首先需要引入另一个概念, 函数式编程. 函数式编程是一种编程范式, 也就是如何编写程序的方法论.它的核心思想是将运算过程尽量写成一系列嵌套的函数调用,关注的 ...
django-ckedit
(转载) 在django项目中使用django-ckeditor 安装django-ckeditor pip install django-ckeditor 安装Pillow Pillow是pyt ...
springboot---发送邮件
1.pom.xml配置 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...
VMware问题--无法获得 VMCI 驱动程序的版本: 句柄无效
关于VMware问题:无法获得 VMCI 驱动程序的版本: 句柄无效.驱动程序“vmci.sys”的版本不正确问题截图: 解决 1.根据配置文件路径找到对应的.vmx文件: 2.用编辑器打开,找到v ...
在虚拟机上的关于Apache（阿帕奇）（1）开启Apache服务以及介绍基础服务
我们来开始讲述Apache(阿帕奇)服务小知识: Apache 使得一台服务器上放很多网站,网站同时访问可以使网站更安全(木马如果是root权限如果webshell apache 可用 ...
学习笔记62_python文件操作
#使用 str = raw_input("输入密码:") 来获取键盘的输入 #创建或打开一个文件 fp = open("hellow.txt","w& ...
CSPS模拟 43
我这次把考试题改完了 T1 A 发现S*b必须和T模a同余? 貌似乘不了几次就爆T了?可以暴力? 也许乘的越多越好? 内心:切了另外怎么设置鼠标指到黑块上边就显示字那种东西最后当然是因为低错没有A ...
【Spdy协议简介】
一.SPDY协议诞生记 SPDY (SPDY 是 Speedy 的昵音,意思是更快)是 Google 开发的基于传输控制协议 (TCP) 的应用层协议 ,那么为什么要搞一个SPDY出来呢?距离万维网之 ...
大数据之路week01--自学之集合_2（列表迭代器 ListIterator）
列表迭代器: ListIterator listerator():List集合特有的迭代器该迭代器继承了Iterator迭代器,所以,就可以直接使用hasNext()和next()方法特有功能: ...

CSS如何设置列表样式属性，看这篇文章就够用了

列表样式属性

list-style-type属性

属性值为none使用方式

属性值为disc使用方式

属性值为circle使用方式

属性值为square使用方式

list-style-position属性

list-style-position属性值说明表

属性值为outside使用方式

属性值为inside使用方式

list-style-image属性

list-style-image属性说明表

list-style属性

CSS如何设置列表样式属性，看这篇文章就够用了的更多相关文章

随机推荐

热门专题