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的值与解释

以下可以自己下来测试看看各种值效果。

参数:

a22c54605afdc580b67b2e05cecd61ba.png

三、布局一般做法

通常在一个网页布局时候开始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

效果如下:

f62743ebdfc259205a0dc6b5f53547ab.png

2、解释

以上去掉li ul ol三者的默认list-style样式,同时设置mragin和padding为0,字体大小为14px,行高为24px。为什么不用li自带有list-style-type设置圆点效果?

这是因为不同浏览器有一定差距,避免圆点效果不同,距离左边不同,所以统一取消list-style样式,重新使用背景样式来排版实现。

以上就是对list-style是什么意思?list-style样式属性详解的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34308792/article/details/118168083

智能推荐

W的图像处理之圆检测(3)一圆形标记点精定位算法_圆形黑白块标记点识别-程序员宅基地

文章浏览阅读1.9k次,点赞2次,收藏4次。圆形标记点精定位算法:标记点精定位模块采用边缘特征拟合的方法。首先进行边缘检测,然后提取标记点边缘像素,最后采用最小二乘拟合法,得到标记点的圆心的精确坐标..._圆形黑白块标记点识别

起重机械PLC自动化控制系统_起重机plc控制系统-程序员宅基地

文章浏览阅读75次。模型库和底层数据的感知共同构成了调度情境,通过对生产任务和调度情境的匹配和知识推理,形成相应的调度方案,并由此得到需要调用的资源,算法库依次生成对应的指令代码和调度方案,来驱动设备的运行。在设备实时运行的过程中,由反馈设备接收相应的反馈数据,并与仿真结果进行交互。如图2所示,无人天车传感器除了包含传统天车的舱门开关、大车限位、小车限位、主钩重锤开关、主钩急停开关等传感器外,还包括大车X轴位置传感器、小车Y轴传感器、主钩高度Z轴传感器、主钩称重传感器、天车间防撞传感器、摆角检测传感器等特殊功能的传感器。_起重机plc控制系统

【C语言复习(二)】struct 与 union 的分析_c语言中的struct和union关键字都是什么含义,寄存器结构体的参考实现为什么把部分s-程序员宅基地

文章浏览阅读1.2k次。C语言中,struct 与 union 关键字都是用来定义用户自己的数据类型,struct用来定义结构体,union用来定义共用体;一个结构体所占用的内存空间等于它的成员所占空间的总和;一个共用体所占内存空间等于它的成员中占用空间最大的成员所占的空间大小,同一时刻,只能有一个成员出于有效状态! 1、struct(1)、思考:一个空的结构体,占用多大内存空间??如下示例:#inc_c语言中的struct和union关键字都是什么含义,寄存器结构体的参考实现为什么把部分s

用Tensorflow2.x实现Faster-RCNN并可视化算法流程_faster rcnn tensorflow2.x-程序员宅基地

文章浏览阅读3.9k次,点赞14次,收藏32次。基于2.0版本的tensorflow,使用VOC2007数据集实现Faster-RCNN目标检测算法。这系列Blog将尽可能的详细介绍并讲解算法的每个模块和每个函数的功能。这篇文章将作为一个总览,可视化一张图片在训练和测试过程中的经过。github:https://github.com/cmd23333/Faster-rcnn-tensorflow2.x欢迎给star ^_^对应demo文件:faster-rcnn-visualization.ipynb整个工程化的代码还是使用PyCharm,但平_faster rcnn tensorflow2.x

移动应用ios和网页应用_如何在iOS上一次移动多个应用-程序员宅基地

文章浏览阅读293次。移动应用ios和网页应用Apple doesn’t really believe in detailed instruction manuals, so some handy tricks slip through the cracks. One such trick we’ve recently discovered is that you can move multiple app icons..._ios不同页面移动软件

手机支架3d打印模型_EFL投影式光固化生物3D打印机亮点(三)模型库一键打印...-程序员宅基地

文章浏览阅读210次。投影式光固化生物3D打印具有分辨率高,打印速度快,可实现复杂结构精细打印等优点,在水凝胶/细胞高精度批量制造上具有明显优势,已逐渐成为主流的生物3D打印方法。EFL团队持续攻关,推出了系列高精度投影式光固化生物3D打印机(EFL-BP-8600/8601)。合适的打印参数选取与调试是生物3D打印成功的一大保证,而如何高效进行打印调试,则要求使用者对打印原理与工艺有较深入的理解,这无形中提..._3d打印手机支架光固化

随便推点

达梦启云平台中,部署使用HIVE笔记_达梦sql中hiveing-程序员宅基地

文章浏览阅读637次。启云平台部署hive_达梦sql中hiveing

算法-前缀和与差分-程序员宅基地

文章浏览阅读606次,点赞27次,收藏14次。那么就可以把 preSum 的公式统一为,此时的 preSum[i] 表示 nums 中 iii 元素左边所有元素之和(不包含当前元素 iii)。​下面以 [1, 12, -5, -6, 50, 3] 为例,用动图讲解一下如何求 preSum。

POJ2018 Best Cow Fences-程序员宅基地

文章浏览阅读74次。我对二分的理解:https://www.cnblogs.com/AKMer/p/9737477.html题目传送门:http://poj.org/problem?id=2018我们二分一个平均数,设\(a\)数组每个数减去平均数为\(b\)数组,若\(b\)数组当中存在某一段长度大于\(k\)并且这一段权值和大于\(0\),那么说明最终平均值肯定大于我们当前二分的平均值。那么怎么求..._poj 2018 best cow fences

nginx 504 proxy_read_timeout_proxy_read_timeout 504-程序员宅基地

文章浏览阅读3.7k次。nginx中proxy_read_timeout的值调的比较小,会出现504_proxy_read_timeout 504

UVA 10817 Headmaster's Headache(01背包+状压DP)_the headmaster of springfield school is considerin-程序员宅基地

文章浏览阅读351次。Problem D: Headmaster's HeadacheTime limit: 2 secondsThe headmaster of spring Field School is considering employing some new teachers for certain subjects. There are a numb_the headmaster of springfield school is considering employing some newteache

kafka日志保留时间设置无效问题_log.retention.hours-程序员宅基地

文章浏览阅读7.6k次,点赞4次,收藏15次。背景看了网上很多文档,说是要设置log.retention.hour等等参数。默认是保留7天,但我实测下来发现日志根本没有任何变化。目前我们的kafka,一天就有400多个G,保留七天大大增加了我们的服务器成本。不生效的设置#设置日志只保留一个小时的 "log.retention.hours": 1#设置大于500M就自动删除 "log.retention.bytes": "5..._log.retention.hours