• 技术文章 >web前端 >css教程

    css怎么去掉li的点

    青灯夜游青灯夜游2021-04-28 15:54:07原创5560

    html的li标签默认带有小圆点,css中可以使用list-style-type属性来去掉li的小圆点;只需要给li标签添加“list-style-type: none;”样式,设置li列表项前无标记即可。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html中的<li>标签自动会带个小圆点(无序列表中)

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    效果图:

    1.png

    要如何去掉这个小圆点呢?其实简单,只需要对<li>标签设置样式 list-style-type: none; 就可以去掉小圆点了。

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css">
    li {list-style-type:none;}
    
    </style>
    </head>
    <body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    
    </body>
    </html>

    效果图:

    2.png

    有序列表的序号也可以使用list-style-type: none;样式去除。

    css list-style-type属性

    list-style-type 属性设置列表项标记的类型。【推荐教程:CSS视频教程

    可以设置的属性值有:

    描述
    none无标记。
    disc默认。标记是实心圆。
    circle标记是空心圆。
    square标记是实心方块。
    decimal标记是数字。
    decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
    lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin大写拉丁字母(A, B, C, D, E, 等。)
    hebrew传统的希伯来编号方式
    armenian传统的亚美尼亚编号方式
    georgian传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic简单的表意数字
    hiragana标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符)
    katakana标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符)
    hiragana-iroha标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号)
    katakana-iroha标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号)

    更多编程相关知识,请访问:编程视频!!

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css li list-style-type
    上一篇:css怎么隐藏标签 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 如何通过css设置背景图片全屏• css文本行高怎么设置• 如何使用CSS实现鼠标移动控制页面元素效果?(代码示例)• css怎么去除图片边框
    1/1

    PHP中文网