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

    css怎么去掉li的点

    青灯夜游青灯夜游2021-03-31 16:26:06原创109

    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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css li list-style-type
    上一篇:css怎么隐藏标签 下一篇:css中link和import的区别是什么
    第15期线上培训班

    相关文章推荐

    • 如何通过css设置背景图片全屏• css文本行高怎么设置• 如何使用CSS实现鼠标移动控制页面元素效果?(代码示例)• css怎么去除图片边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网