首頁 > web前端 > css教學 > HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

yulia
發布: 2018-09-12 16:00:57
原創
19708 人瀏覽過

在工作中,我們常會用到列表,列表又分成有序列表和無序列表,無序列表在頁面中會顯示實心圓點,有序列表會顯示序號,但是,有時我們不要它,覺得是多餘的,不需要列表前面的點和序號顯示出來,那可以去除列表樣式嗎?怎麼去掉li前面的點呢? 接下裡,舉例並且用程式碼和圖片來講解。

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

<ul>
   <li>西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>
登入後複製

效果圖:

HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

現在,我不需要清單前面的點點,該如何移除呢?

接下來介紹幾種移除列表前面小圓點的方法。

1、在CSS中寫上list-style:none;透過這個屬性,可以去除列表樣式

 ul{list-style: none;}
登入後複製

效果圖:

HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

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>
登入後複製

效果圖:

HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

4、當然,也可以給標籤一個類別名,在CSS中給樣式,例如下列程式碼,只給第一個li​​ 標籤樣式,它自然就沒有前面的圓點了。

HTML部分:

<ul>
   <li class="a1">西施</li>
   <li>王昭君</li>
   <li>貂蝉</li>
   <li>杨玉环</li>   
  </ul>
登入後複製

CSS部分:

.a1{list-style-type: none;}
登入後複製

效果圖:

HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點

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

以上是HTML的清單樣式可以去掉嗎?怎麼去掉li前面的小黑點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板