html li去掉黑點_HTML的清單樣式可以去除嗎？怎麼去掉li前面的小黑點

在工作中，我們經常會用到清單，清單又分為有序清單和無序清單，無序清單在頁面中會顯示實心圓點，有序清單會顯示序号，但是，有時候我們不要它，覺得是多餘的，不需要清單前面的點和序号顯示出來，

那可以去除清單樣式嗎？怎麼去掉li前面的點呢？

接下裡，舉例并且用代碼和圖檔進行講解。

程式猿的生活：打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）​zhuanlan.zhihu.com

看這個例子，我用無序清單寫了古代四大美女的名字，看看沒有去除清單樣式時，是什麼效果。

<ul>
 <li>西施</li>
 <li>王昭君</li>
 <li>貂蟬</li>
 <li>楊玉環</li>   
 </ul>
           

效果圖：

現在，我不需要清單前面的點點，應該如何去除呢？

接下來介紹幾種去除清單前面小圓點的方法。

1、在CSS中寫上 list-style:none；通過這個屬性，可以去除清單樣式

ul{list-style: none;}
           

效果圖：

2、在CSS中加上 list-style-type: none ；和上一種方式一樣，隻是用了不同的屬性。

ul{list-style-type: none;}
           

3、在 li 标簽裡面直接加入清單樣式，前面兩個給了樣式去除圓點，後面兩個沒給，還會顯示出來。

<ul>
 <li style="list-style-type: none;">西施</li>
 <li style="list-style-type: none;">王昭君</li>
 <li>貂蟬</li>
 <li>楊玉環</li>   
 </ul>
           

效果圖：

4、當然，也可以給标簽一個類名，在CSS中給樣式，比如下列代碼，隻給第一個 li 标簽樣式，它自然就沒有前面的圓點了。

HTML部分：

<ul>
 <li class="a1">西施</li>
 <li>王昭君</li>
 <li>貂蟬</li>
 <li>楊玉環</li>   
 </ul>
           

CSS部分：

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

效果圖：

總結：以上介紹了CSS中如何去除清單樣式，四種方法都可以使用，看個人習慣了，希望這個如何去除 li 前面的點的 教程可以幫助到你！

以上就是HTML的清單樣式可以去除嗎？怎麼去掉li前面的小黑點的詳細内容，更多請關注我！需要資料的可以進群領取哦。