html list-style的作用,list-style是什么意思?list-style样式属性详解

article/2025/9/18 23:24:50

本篇文章给大家带来的内容是关于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中文网。


http://chatgpt.dhexx.cn/article/gi62n4OS.shtml

相关文章

.styl格式的CSS样式文件是什么文件

.styl格式的CSS样式文件是什么文件 Stylus 是一个 基于Node.js的CSS的预处理框架 。可以说是一种新型语言,其本质上做的事情与sass/less等类似。Stylus 比less更强大,而且基于nodejs;比sass更符合我们的思路。 最近研究了一下vue.js项目的高…

python中pip模块卸载并重装

** python中pip模块卸载并重装 ** 1、卸载已有的pip python -m pip uninstall pip2、重新安装 将https://bootstrap.pypa.io/get-pip.py中的内容复制下来,保存文件名为get-pip.py,之后cmd进入命令行输入如下命令即可: python get-pip.py

pip的安装和卸载

待安装系统环境 系统:macOS 10.15.5 依赖:Python 2.7.16 查看本机python版本的方法 $ python --versionPython 2.7.16 检测是否安装pip方法 $ pip-bash: pip: command not found command not found的提示说明你还没有安装pip 安装 安装好Python…

python中 pip不慎卸载了,重新安装方法

pip不慎卸载了,重新安装方法 今天不小心把pip给删除了,然后就搜怎么安装。弄了半天才弄好,这边记录一下: 1.下载安装文件 官方网站给出了安装的方法https://packaging.python.org/tutorials/installing-packages/#use-pip-for-…

pip 批量安装和卸载package

文章目录 1、pip批量安装package2、pip批量卸载package3、pip换国内源 1、pip批量安装package 将需要安装的包保存在aa.txt中 cd到aa.txt所在目录,运行: $ pip install -r aa.txt2、pip批量卸载package 将需要卸载的包保存在aa.txt中 cd到aa.txt所在…

两种方法彻底删除pip下载的所有第三方库,第二种最快

快速删除pip所有库 前言第一种第二种方法 前言 昨天有小伙伴在群里问怎么删除所有第三方库,已经太久没人问这种问题了,这让我突然意识到还是有很多小伙伴都是处于初学阶段的,于是今天给大家分享一下两种快速删除第三方库的方法,帮…

python pip 卸载环境内所有的包

那么如何一次性删除所有的包呢?首先需要执行以下代码: pip freeze>modules.txt 这时候就能够把所有的第三方模块的模块名称以及第三方模块的版本号等等信息保存在了这个 modules.txt文件中,之后的操作就是对这个文件进行操作了。 执行如…

pip被卸载了,如何再重新安装

今天不小心把pip给删除了,然后就搜怎么安装。弄了半天才弄好,这边记录一下: 首先这个网站给出了安装的方法https://packaging.python.org/tutorials/installing-packages/#use-pip-for-installing 全英文,看不懂?那就…

Windows下卸载pip的方法

一、卸载命令 在cmd中输入 python -m pip uninstall pip 二、执行命令后,弹出确认提示,输入y,给与确认 三、cmd中输入pip,查看是否安装卸载成功

不小心将 pip 卸载了,重新安装pip

打开 python 安装目录 下的 Scripts 文件夹,在空白处shift鼠标右键,选择在此处打开命令窗口, 在弹出的窗口中执行命令 easy_install.exe pip 即可。 如果 python 安装目录下 的 Scripts 目录中有没有 easy_install.exe 参见 http://blo…

Ubuntu16.04 安装 卸载 pip

实验环境 Ubuntu16.04;VMware15; 问题描述 笔者在虚拟机上安装好Ubuntu16.04, 一段时间之后重新打开准备编译python程序,在安装所需包时发现,pip pip3,指向的都是python2.7; hadoopubuntu:~…

pip 批量完全卸载包

pip 批量完全卸载包 创作背景问题分析解决方法代码详解改 BUG结尾 创作背景 因为我本机环境中安装的第三方库太多了,所以今天我准备把它们都卸载了,但因为太多了,所以不可能手动一个一个来,于是我便写了个小脚本,本文…

【python】如何使用pip安装、卸载包

1、在安装python的时候要把pip勾选上(默认安装方式已经为你勾选好了)。这样你就已经安装了pip。 2、打开命令提示符窗口 开始→所有程序→附件→运行(快捷键 WinR),在对话框中输入cmd,回车确认即可 3.安装…

pip卸载库对应所有依赖库的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【pip command】之卸载 pip 之后重新安装

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言1 卸载 pip2 安装 pip3 查看 pip4 升级 pip总结 前言 提示:这里可以添加本文要记录的大概内容: 本来是一件没有必要的事情,但是…

已解决:不小心卸载pip后(重新安装pip的两种方式)

已解决:不小心卸载pip后(手动安装pip的两种方式) 文章目录 报错问题检查pip是否真的被卸载了解决方法1(复杂)解决方法2(简单推荐使用)千人全栈VIP答疑群联系博主帮忙解决报错 报错问题 一个粉丝…

Python基础:pip的安装与卸载

一、pip的安装: winR出现一下界面 然后输入cmd点击确定,出现以下界面,就可进行下载 以下是两种下载方法 1、普通安装:pip install 模板名 2、指定版本安装:pip install 模板名版本 二、pip的卸载:pip un…

已解决卸载pip重新安装的方法

已解决卸载pip重新安装的方法 文章目录 问题需求卸载pip安装pip千人全栈VIP答疑群联系博主帮忙解决报错 问题需求 粉丝群里面的一个小伙伴遇到问题跑来私信我,想用卸载pip重新安装pip,但是发生了报错(当时他心里瞬间凉了一大截,跑…

php mysql stmt_PHP的mysqli_stmt_init()函数讲解

PHP mysqli_stmt_init() 函数 初始化声明并返回 mysqli_stmt_prepare() 使用的对象: // 假定数据库用户名:root,密码:123456,数据库:codingdict $conmysqli_connect("localhost","root"…

mysql_stmt_precheck_COM_STMT_PREPARE 1

mysqld_stmt_preparevoid mysqld_stmt_prepare(THD*thd,const char *query,uintlength, Prepared_statement*stmt ) 功能: COM_STMT_PREPARE handler. 给定带有参数标志的查询字符串,从中创建预处理语句并将PS发送给客户端。 如果在查询中找到参数标志&a…