溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML無(wú)序列表樣式的案例分析

發(fā)布時(shí)間：2020-09-22 11:29:48 來(lái)源：億速云 閱讀：306 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML無(wú)序列表樣式的案例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

        首先這篇文章一開(kāi)始我們就開(kāi)始介紹在html中是怎么把ul標(biāo)簽的點(diǎn)給去掉的：

大家應(yīng)該都使用過(guò)ul無(wú)序列表標(biāo)簽，ul標(biāo)簽的用法有很多，很多時(shí)候我們都可以用點(diǎn)來(lái)替代，這樣也感覺(jué)挺好的。可有時(shí)候用點(diǎn)替代感覺(jué)不太好用，這時(shí)候我們一般都想著如何去掉那個(gè)點(diǎn)，或者改成別的樣式。今天這篇文章主要說(shuō)的就是如何去掉那個(gè)點(diǎn)的，后面我們也會(huì)說(shuō)改成別的樣式去顯示。

現(xiàn)在說(shuō)說(shuō)如何去掉點(diǎn)，我們用完全的代碼實(shí)例來(lái)演示ul標(biāo)簽：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>億速云</title>
</head>
<body>
<ul>
  <li>億速云</li>
  <li>百度百科</li>
  <li>騰訊課堂</li>
</ul>
</body>

這圖里面都是自定義的小圓點(diǎn)，很多時(shí)候用著小圓點(diǎn)也是可以的，但是如果我們想要去掉小圓點(diǎn)該怎么做呢？來(lái)看看小編是怎么實(shí)現(xiàn)的。

再給一個(gè)全部的ul標(biāo)簽代碼演示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>億速云</title>
<style type=""text/css>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
  <li>億速云</li>
  <li>百度百科</li>
  <li>騰訊課堂</li>
</ul>
</body>
</html>

和上一個(gè)代碼相比，這個(gè)代碼僅僅加了一個(gè)css樣式的文件，用一點(diǎn)css樣式，就能改變ul無(wú)序列表的樣式。有些人雖然不會(huì)css樣式，但是這么簡(jiǎn)單的樣式只要記住就好，知道該怎么寫就能消除掉ul標(biāo)簽的默認(rèn)點(diǎn)就行了。

二、現(xiàn)在我們說(shuō)說(shuō)怎么把ul標(biāo)簽變成其它的樣式，比如，小圓點(diǎn)變成方正的形狀。讓我們繼續(xù)來(lái)看

在這里我們說(shuō)的是ul標(biāo)簽的type的屬性，這個(gè)屬性在有序列表ol標(biāo)簽中也能用，不過(guò)屬性的值不一樣而已。現(xiàn)在讓我們看看type標(biāo)簽在ul標(biāo)簽中的應(yīng)用吧：

這還有個(gè)ul標(biāo)簽的實(shí)例：

<ul type="square">
  <li>億速云</li>
  <li>百度百科</li>
  <li>騰訊課堂</li>
</ul>

看上圖，小了，但很明顯，是從原來(lái)的小圓點(diǎn)變成了現(xiàn)在的方正的黑點(diǎn)了。這就是樣式的其中之一，

如上圖，現(xiàn)在都變成空心圓了，這是用HTML ul標(biāo)簽和屬性組合而成的三種樣式（還有一種樣式是把小圓點(diǎn)變回來(lái)的，用的是type=“

disc”）在很多都開(kāi)始用css樣式表來(lái)給標(biāo)簽設(shè)置樣式，但還是有很多人都喜歡用純html標(biāo)簽來(lái)實(shí)現(xiàn)樣式，就比如小編我，就一直用的都是HTML標(biāo)簽的樣式，很少去用css樣式，有些時(shí)候是標(biāo)簽的樣式不好用的時(shí)候我才去用css樣式來(lái)代替。

關(guān)于HTML無(wú)序列表樣式的案例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手