0

0

HTML中ul标签如何去掉点?HTML无序列表的样式实例解析

寻∝梦

寻∝梦

发布时间:2018-08-31 13:35:08

|

41699人浏览过

|

来源于php中文网

原创

本篇文章主要讲述的是关于html中的ul标签的默认小点给取消掉,还有关于html的无序列表ul标签的样式解释,给出了ul标签中的type属性三种值的介绍。现在就让我们一起来看本篇文章吧

首先这篇文章一开始我们就开始介绍在html中是怎么把ul标签的点给去掉的:

大家应该都使用过ul无序列表标签,ul标签的用法有很多,很多时候我们都可以用点来替代,这样也感觉挺好的。可有时候用点替代感觉不太好用,这时候我们一般都想着如何去掉那个点,或者改成别的样式。今天这篇文章主要说的就是如何去掉那个点的,后面我们也会说改成别的样式去显示。(想看更多就来PHP中文网,这里有关于HTML学习的课程

现在说说如何去掉点,我们用完全的代码实例来演示ul标签:





PHP中文网


  • php中文网
  • 百度百科
  • 腾讯课堂

这是一个基本的ul无序列表的应用,显示效果如下图所示:

立即学习前端免费学习笔记(深入)”;

tuyi.png

这图里面都是自定义的小圆点,很多时候用着小圆点也是可以的,但是如果我们想要去掉小圆点该怎么做呢?来看看小编是怎么实现的。

再给一个全部的ul标签代码演示:





PHP中文网



  • php中文网
  • 百度百科
  • 腾讯课堂

和上一个代码相比,这个代码仅仅加了一个css样式的文件,用一点css样式,就能改变ul无序列表的样式。有些人虽然不会css样式,但是这么简单的样式只要记住就好,知道该怎么写就能消除掉ul标签的默认点就行了。

这个的效果图如下:

tuer.png

是不是真的没有小圆点了,这样的标签能应用与很多场合,比如适合做导航条之类的应用,说完了去掉小圆点了。

二、现在我们说说怎么把ul标签变成其它的样式,比如,小圆点变成方正的形状。让我们继续来看

在这里我们说的是ul标签的type的属性,这个属性在有序列表ol标签中也能用,不过属性的值不一样而已。现在让我们看看type标签在ul标签中的应用吧:

Videoleap
Videoleap

Videoleap是一个一体化的视频编辑平台

下载

这还有个ul标签的实例:

  • php中文网
  • 百度百科
  • 腾讯课堂

上图type=“square”这是什么意思呢?让我们来看看效果图:

tusan.png

看上图,有点小了,但很明显,是从原来的小圆点变成了现在的方正的黑点了。这就是样式的其中之一,还有一个属性值是:

type=“circle”这个的意思也很容易理解,我们还是先看一下效果图吧:

tusi.png

如上图,现在都变成空心圆了,这是用HTML ul标签和属性组合而成的三种样式(还有一种样式是把小圆点变回来的,用的是type=“

disc”)在很多都开始用css样式表来给标签设置样式,但还是有很多人都喜欢用纯html标签来实现样式,就比如小编我,就一直用的都是HTML标签的样式,很少去用css样式,有些时候是标签的样式不好用的时候我才去用css样式来代替。

好了以上就是本篇关于ul标签文章的全部内容(想学更多就来PHP中文网,一个学编程的网站),有问题的可以在下方留言。

【小编推荐】

html5中的meta标签的三要素是什么?meta标签的使用总结

html select下拉框样式怎么制作?html select样式详解

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

514

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

440

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

92

2025.12.30

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

125

2025.12.30

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

79

2025.12.30

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

159

2025.12.31

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

31

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

45

2025.12.31

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号