首頁  >  文章  >  web前端  >  css ul標籤怎麼去掉圓點

css ul標籤怎麼去掉圓點

青灯夜游
青灯夜游原創
2022-04-25 17:55:5312843瀏覽

在css中,可用list-style-type屬性來去掉ul的圓點標記,語法為「ul{list-style-type:none}」;list-style-type屬性可設定列表項標記的類型,當值為「none」可不定義標記,也可移除已有標記。

css ul標籤怎麼去掉圓點

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

HTML ul標籤可以無序列表,清單中的每一個選項都使用li標籤定義。

HTML ul無序列表預設使用圓點作為選項標記:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类:</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

css ul標籤怎麼去掉圓點

那麼怎麼移除這些圓點標記呢?可以利用css。

在css中,可以利用list-style-type屬性來移除無序列表的圓點標記。

list-style-type屬性可以設定清單項目標記的類型,當屬性值設定為「none」可不定義標記,也可移除現有的預設標記。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
<style>
ul{
list-style-type:none;
}
</style>
</head>
<body>
    <p>早餐的种类:</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

css ul標籤怎麼去掉圓點

(學習影片分享:css影片教學web前端

以上是css ul標籤怎麼去掉圓點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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