热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

htmlli怎么去掉点

htmlli去掉点的方法:1、使用“list-style:none”方式;2、通过“list-style-type:none”去除;3、在li标签里面直接加入列表样式;4、通过“.a1{list-style-type:none;}”去除。

html li去掉点的方法:1、使用“list-style:none”方式;2、通过“list-style-type:none”去除;3、在li标签里面直接加入列表样式;4、通过“.a1{list-style-type:none;}”去除。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

html li去掉黑点

在工作中,我们经常会用到列表,列表又分为有序列表和无序列表,无序列表在页面中会显示实心圆点,有序列表会显示序号,但是,有时候我们不要它,觉得是多余的,不需要列表前面的点和序号显示出来,那可以去除列表样式吗?怎么去掉li前面的点呢?接下里,举例并且用代码和图片进行讲解。

看这个例子,我用无序列表写了古代四大美女的名字,看看没有去除列表样式时,是什么效果。

  • 西施
  • 王昭君
  • 貂蝉
  • 杨玉环

效果图:

2、在CSS中加上 list-style-type: none ;和上一种方式一样,只是用了不同的属性。

ul{list-style-type: none;}

3、在 li 标签里面直接加入列表样式,前面两个给了样式去除圆点,后面两个没给,还会显示出来。

  • 西施
  • 王昭君
  • 貂蝉
  • 杨玉环

效果图:

4、当然,也可以给标签一个类名,在CSS中给样式,比如下列代码,只给第一个 li 标签样式,它自然就没有前面的圆点了。

HTML部分:

  • 西施
  • 王昭君
  • 貂蝉
  • 杨玉环

CSS部分:

.a1{list-style-type: none;}

效果图:

总结:以上介绍了CSS中如何去除列表样式,四种方法都可以使用,看个人习惯了,希望这个如何去除 li 前面的点的 教程可以帮助到你!

【推荐学习:css视频教程】

以上就是html li怎么去掉点的详细内容,更多请关注其它相关文章!


推荐阅读
  • 主板市盈率、市净率及股息率的自动化抓取
    本文介绍了如何通过Python脚本自动从中国指数有限公司网站抓取主板的市盈率、市净率和股息率等关键财务指标,并将这些数据存储到CSV文件中。涉及的技术包括网页解析、正则表达式以及异常处理。 ... [详细]
  • 本文详细介绍了在Delphi环境中对DLL文件进行断点调试的方法,包括设置依赖的可执行文件、编译器和链接器的调试选项,以及运行时参数的配置。 ... [详细]
  • 本文介绍如何创建一个专门用于处理浮点数的JSON处理器,并将其注册到JSON配置器中,以实现对浮点数的精确控制和格式化输出。 ... [详细]
  • 详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类型的空间查询,包括点周边、线周边、面内等多种方式;其次,图形绘制完成后状态的展示;再次 ... [详细]
  • Navicat 导出查询结果时如何生成包含指定列名的 INSERT 语句
    本文介绍了在使用 Navicat 导出查询结果时,如何确保生成的 INSERT 语句中包含指定的列名,避免因设置不当导致列名缺失的问题。 ... [详细]
  • 本文介绍了iftop的下载地址、基本参数配置方法及其在不同Linux发行版中的安装问题解决方案。iftop是一款强大的实时网络流量监控工具,适用于需要精确监控网络带宽使用情况的场景。 ... [详细]
  • 题目描述了一个病毒检测问题,要求使用AC自动机算法统计目标文本中多个模式串的出现次数。 ... [详细]
  • 本文介绍如何通过简单的代码封装,创建一个能够灵活应用于多种场景的通用选择器,提高前端开发效率。 ... [详细]
  • 本文详细介绍了使用JavaScript和jQuery进行页面加载初始化的方法,包括不同的实现方式及其应用场景,并探讨了两者在初始化过程中的主要区别。 ... [详细]
  • Java中'=='与'equals'方法的区别
    在Java编程语言中,'=='操作符用于比较两个对象的引用是否指向同一个内存位置,而'equals'方法则用于比较两个对象的内容是否相等。本文通过具体示例详细解释了两者的差异,并提供了代码演示。 ... [详细]
  • 深入理解希尔排序算法
    本文详细介绍了希尔排序的原理及其相对于传统插入排序的优势,并通过实例解析了希尔排序的具体实现过程,包括代码示例及性能分析。 ... [详细]
  • 免费获取:全面更新的Linux集群视频教程及配套资源
    本资源包含最新的Linux集群视频教程、详细的教学资料、实用的学习课件、完整的源代码及多种软件开发工具。百度网盘链接:https://pan.baidu.com/s/1roYoSM0jHqa3PrCfaaaqUQ,提取码:41py。关注我们的公众号,获取更多更新的技术教程。 ... [详细]
  • 在J2EE开发领域,众多专业术语如PO、VO、BO、DTO、POJO及DAO常常令初学者感到困惑。本文旨在清晰解释这些术语及其相互间的关系,帮助开发者更好地理解和运用这些概念。 ... [详细]
  • 本文提供了关于WSDL(Web Services Description Language)的详细参考资料链接,包括官方文档和深入解析,旨在帮助开发者更好地理解和使用WSDL进行Web服务的开发与集成。 ... [详细]
  • 本文详细介绍了 HTML DOM 中的 document.getElementsByTagName 方法,通过实例说明其用法和应用场景。 ... [详细]
author-avatar
纯洁的老宁同志
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有