html list-style的作用,list-style是什么意思?list-style样式属性详解-程序员宅基地
技术标签： html list-style的作用
本篇文章给大家带来的内容是关于list-style是什么意思?list-style样式属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、list-style作用与用处
list-style是设置列表li的样式。比如li前面为阿拉伯数字、圆点、实心圆、图片、空心圆、小写英文字母、大写英文字母、传统的亚美尼亚数字等。
二、语法
1、语法：
list-style : list-style-image || list-style-position || list-style-type
我们知道html语法规定li必须在ul或ol内使用，那么对ul或ol可以设置list-style-image引入图片作为li的前面布局素材。但通常div css布局时候不采用这种方法来设置li的前面图片素材，通常对li直接设置背景图片，这样兼容更好，更易控制。
我们使用比较多是list-style的list-style-type属性来设置li默认前面样式。
2、list-style-type的值与解释
以下可以自己下来测试看看各种值效果。
参数：
三、布局一般做法
通常在一个网页布局时候开始CSS就要把ul ol li三者列表list-style样式去掉，也是为了兼容各大浏览器，取消列表标签默认list-style。
取消ul li ol的list-style样式代码：ul,ol,li{list-style:none}
在网页中要对列表前设置圆点，再通过对li设置Background背景图片即可。
1、代码如下：
ul li布局实例ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
- php.cn-1
- php.cn-2
- php.cn-3
效果如下：
2、解释
以上去掉li ul ol三者的默认list-style样式，同时设置mragin和padding为0，字体大小为14px，行高为24px。为什么不用li自带有list-style-type设置圆点效果？
这是因为不同浏览器有一定差距，避免圆点效果不同，距离左边不同，所以统一取消list-style样式，重新使用背景样式来排版实现。
以上就是对list-style是什么意思?list-style样式属性详解的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。
智能推荐
BERT在语言翻译中的挑战：如何克服语言差异_bert是否适合用于翻译问题-程序员宅基地
文章浏览阅读866次，点赞19次，收藏23次。1.背景介绍语言翻译是自然语言处理领域的一个重要任务，它涉及将一种语言中的文本翻译成另一种语言。随着大数据时代的到来，语言翻译技术的发展得到了重要的推动。随着深度学习技术的发展，语言翻译技术也从传统的统计模型逐渐转向深度学习模型。在2018年，Google发布了BERT（Bidirectional Encoder Representations fr_bert是否适合用于翻译问题
JSON数据结构（A、快速入门篇）（Yanlz+Data+JsonArray+JsonObject+JsonValue+JsonMapper.ToJson+JsonMapper.ToObject+）_jsonmapper.toobject获取的信息是什么类型-程序员宅基地
文章浏览阅读3.4k次。《JSON数据结构》 版本 作者 参与者 完成日期 备注 Data_JSON_V01_1.0 严立钻 2018.08.24 ..._jsonmapper.toobject获取的信息是什么类型
B -- POJ 1208 The Blocks Problem_poj1208-程序员宅基地
文章浏览阅读1.4k次。The Blocks ProblemTime Limit: 1000 MS Memory Limit: 10000 KB64-bit integer IO format: %I64d , %I64u Java class name: Main[Submit] [Status] [Discuss]DescriptionMany areas of Computer _poj1208
MapBox安装（Unity3D使用）_如何安装mapbox软件-程序员宅基地
文章浏览阅读3k次，点赞6次，收藏11次。最近工作中需要生成一个三维地球，需要使用地图中的三维地球数据，遂研究之，写文以记录。 好吧，连装三个软件都失败了（广告软文真多） 然后发现MapBox这个面向开发者的全球地图平台（开源，免费！） 遂配置一下：一、注册下载 首先进入https://www.mapbox.com/这个网站，点击注册 注册成功后一直点下..._如何安装mapbox软件
css二级侧拉菜单，右侧拉开菜单，右侧展开菜单-程序员宅基地
文章浏览阅读1.5k次。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><..._css菜单右侧展开
Java注解之@Autowired，一文掌握@Autowired注解知识(2)_java autowired qualifier-程序员宅基地
文章浏览阅读1.6k次，点赞33次，收藏22次。Autowired可以将@Autowired注解应用于类的字段上，使依赖对象自动注入到字段中。可以将@Autowired注解应用于类的构造方法上，使依赖对象通过构造方法注入。可以将@Autowired注解应用于类的 Setter 方法上，使依赖对象通过 Setter 方法进行注入。可以将@Autowired注解应用于类的普通方法上，使依赖对象通过方法参数进行注入。需要注意的是，当有多个匹配的依赖对象时，@Autowired注解可以与@Qualifier。_java autowired qualifier
随便推点
小程序云开发获取不到openId_setting data field "openid" to undefined is invali-程序员宅基地
文章浏览阅读457次。Setting data field "openId" to undefined is invalid_setting data field "openid" to undefined is invalid.
docker推送镜像到阿里云denied: requested access to the resource is denied_阿里云 denied: requested access to the resource is de-程序员宅基地
文章浏览阅读514次。以下文章中使用【】包裹的信息为自身的信息，忽略【】符号。不能忽略，必须要的，我就是没写这个报错了。_阿里云 denied: requested access to the resource is denied
sphinx3.1.1配置中文搜索_sphinx3 布尔查询语法 搜索中文-程序员宅基地
文章浏览阅读2k次。上一篇讲到了sphinx3.1.1的部署、创建索引、php调用，但是是英文的，故补充中文分词搜索。中文搜索测试：create table student ( id int(10) not null, name varchar(10) not null, content text)ENGINE=InnoDB DEFAULT CHARSET=utf8;录入..._sphinx3 布尔查询语法 搜索中文
麒麟银河操作系统V10部署ffmpeg(也能用于Linux系统)_银河麒麟 ffmpeg-程序员宅基地
文章浏览阅读1.5k次，点赞18次，收藏29次。部署ffmpeg用来处理视频的各种操作，如编码解码，格式转换，剪辑，处理实时视频流，音频流，加滤镜等_银河麒麟 ffmpeg
证明：二分图中的环只能是偶环，不可能是奇环_如何证明二部图就是偶圈图-程序员宅基地
文章浏览阅读9.3k次，点赞6次，收藏6次。二分图定义：是这样一个图，其顶点可分为两集合X和Y，所有的边关联的两顶点中，恰一个属于Ｘ，另一个属于Ｙ。同一集合的结点不相邻。证明：假设二分图中的环是奇数环。设一个环，x1，x2，x3，，，，x(2*k-1)，k>=1且为整数。相邻两点有边连接，x1与x(2*k-1)相连。由二分图定义可知：x1与x2分别在X集合和Y集合，由于x2与x3的关系可知x3在X集合，则x4在Y集合，以此类推，_如何证明二部图就是偶圈图
linux编译指定glibc路径,在Arch Linux中编译Glibc-程序员宅基地
文章浏览阅读798次。8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？Arch Linux对于快速折腾各种新东西是非常方便的。作为一个纯粹的桌面端Linux环境，稳定性完全可以给易用性让步。但是过快的版本更新也使得我们没有办法获得一个稳定的调试环境：我们有的时候需要旧版本，或者需要重新指定其中的编译选项，或者编译一份no-strip版本。获取PKGBUILDArch Linux为了方便定制..._linux 编译 指定glibc路径