HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析-html教學-PHP中文網

首頁

web前端

html教學

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

寻∝梦

Aug 31, 2018 pm 01:35 PM

htmltype

本篇文章主要講述的是關於HTML中的ul標籤的預設小點給取消掉，還有關於HTML的無序列表ul標籤的樣式解釋，給出了ul標籤中的type屬性三種值的介紹。現在就讓我們一起來看這篇文章吧

首先這篇文章一開始我們就開始介紹在html中是怎麼把ul標籤的點給去掉的：

#大家應該都使用過ul無序列表標籤，ul標籤的用法很多，很多時候我們都可以用點來替代，這樣也感覺挺好的。但有時候用點替代感覺不太好用，這時候我們通常都想著如何去掉那個點，或是改成別的樣式。今天這篇文章主要說的話就是如何去掉那個點的，後面我們也會說改成別的樣式去顯示。 (想看更多就來PHP中文網，這裡有關於HTML學習的課程）

#現在說說如何去掉點，我們用完全的程式碼實例來示範ul標籤：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<ul>
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>
</body>
</html>

這是一個基本的ul無序列表的應用，顯示效果如下圖所示：

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

這裡面都是自訂的小圓點，很多時候用小圓點也是可以的，但是如果我們想要去掉小圓點該怎麼做呢？來看看小編是怎麼實現的。

再給一個全部的ul標籤程式碼示範：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type=""text/css>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>
</body>
</html>

和上一個程式碼相比，這個程式碼只是加了一個css樣式的文件，用一點css樣式，就能改變ul無序列表的樣式。有些人雖然不會css樣式，但是這麼簡單的樣式只要記得就好，知道該怎麼寫就能消除掉ul標籤的預設點就行了。

這個的效果圖如下：

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

是不是真的沒有小圓點了，這樣的標籤能應用與很多場合，例如適合做導航條之類的應用，說完了去掉小圓點了。

二、現在我們說怎麼把ul標籤變成其它的樣式，比如，小圓點變成方正的形狀。讓我們繼續來看

在這裡我們說的是ul標籤的type的屬性，這個屬性在有序列表ol標籤中也能用，不過屬性的值不一樣而已。現在讓我們來看看type標籤在ul標籤中的應用程式：

這還有一個ul標籤的實例：

<ul type="square">
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>

上圖type=“square”這是什麼意思呢？讓我們來看看效果圖：

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

看上圖，有點小了，但很明顯，是從原來的小圓點變成了現在的方正的黑點了。這就是樣式的其中之一，還有一個屬性值是：

type=「circle」這個的意思也很容易理解，我們還是先看一下效果圖：

HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析

#如上圖，現在都變成空心圓了，這是用HTML ul標籤和屬性組合而成的三種樣式（還有一種樣式是把小圓點變回來的，用的是type=“

disc”）在很多都開始用css樣式表來為標籤設定樣式，但還是有很多人都喜歡用純html標籤來實現樣式，就比如小編我，就一直用的都是HTML標籤的樣式，很少去用css樣式，有些時候是標籤的樣式不好用的時候我才去用css樣式來代替。

好了以上就是這篇關於ul標籤文章的全部內容（想學更多就來PHP中文網，一個學程式設計的網站），有問題的可以在下方留言。

【小編推薦】

html5中的meta標籤的三要素是什麼？ meta標籤的使用總結

html select下拉框樣式怎麼製作？ html select樣式詳解

以上是HTML中ul標籤如何去掉點？ HTML無序列表的樣式實例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

Go中Type关键字有哪些用法Sep 06, 2023 am 09:58 AM

Go中Type关键字的用法有定义新的类型别名或者创建新的结构体类型。详细介绍：1、类型别名，使用“type”关键字可以为已有的类型创建别名，这种别名不会创建新的类型，只是为已有的类型提供一个新的名称，类型别名可以提高代码的可读性，使代码更加清晰；2、结构体类型，使用“type”关键字可以创建新的结构体类型，结构体是一种复合类型，可以用于定义包含多个字段的自定义类型等等。

解决Ubuntu挂载移动硬盘错误：未知的文件系统类型exfatJan 05, 2024 pm 01:18 PM

ubuntu挂载移动硬盘出现错误：mount:unknownfilesystemtype'exfat'处理方法如下：Ubuntu13.10或安装exfat-fuse:sudoapt-getinstallexfat-fuseUbuntu13.04或以下sudoapt-add-repositoryppa:relan/exfatsudoapt-getupdatesudoapt-getinstallfuse-exfatCentOSLinux挂载exfat格式u盘错误的解决方法CentOS中加载extfa