首頁  >  文章  >  web前端  >  css如何去除li前面的點

css如何去除li前面的點

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-09 17:26:486351瀏覽

在css中,可以使用list-style屬性來清除li前面的點,只需要給li標籤設定「list-style:none」樣式即可。 list-style屬性是用來控制li列表項目標記的。當值為none時可以清除li前面的項目標記。

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

對於許多人用div來做網站時,總是會用到li,但顯示效果時前面總是會有一個小黑點,這個令很多人頭痛,但又找不到要源,其它我們可以用以下方法來清除。   

1、在CSS中寫入程式碼。找到相關性的CSS,在.li.ul下寫入list-sytle:none;當然有的會這樣來寫list-style-type :none, 這種寫法特別是在一些CMS中最常見。 

2、在相關的頁面找到head部分寫入下面的程式碼

<style type="text/css">
li{
    list-style:none;
}
</style>

 3、在li,ul內加入list-style。

<ul style="list-style-type:none>
    <li>
    <a herf="http://123.COM">我的博客</a>
    </li>
< /ul>

當然這種是很麻煩的了。

最簡單的就是第一種了,透過CSS來控制,這當然會有不錯的效果了。

這幾種方法都是透過設定list-style:none來設定的,有的是會用list-style-type,我們來看一看它的屬性。

  • none:不使用項目符號

  • disc:實心圓,預設值 circle空心圓

  • square:實心方塊

  • decimal:阿拉伯數字

  • lower-roman :小寫羅馬數字 

  • upper-roman:大寫羅馬數字 

  • lower-alpha小寫英文字母 

########################### ###upper-alpha:大寫英文字母############這些都可以來代替上文中的none,想要什麼樣的都會有一個對應的對應。 ###### A)、運用CSS格式化清單符號: ###
ul li{
list-style-type:none;
}
### B)、如果你想將列表符號換成影像,則:###
ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}
### C)、為了左對齊,可以用以下程式碼:###
ul{
list-style-type:none;
margin:0px;
}
###D)、如果想為清單加上背景色,可以用以下程式碼: ###
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
###推薦學習:###css影片教學##### ##

以上是css如何去除li前面的點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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