• 技术文章 >web前端 >前端问答

    css ul标签怎么去掉圆点

    青灯夜游青灯夜游2022-04-25 17:55:53原创396

    在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

    本教程操作环境: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>

    1.png

    那么怎么去除这些圆点标记呢?可以利用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>

    2.png

    (学习视频分享:css视频教程web前端

    以上就是css ul标签怎么去掉圆点的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:es6与es5的构造函数有什么区别 下一篇:div css的布局较table布局有什么优点
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3筛选怎么除去第一个元素的元素• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些• css3包含哪些模块• 在css3中可实现缩放效果的是什么属性
    1/1

    PHP中文网