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

    html有序列表怎么弄自定义

    醉折花枝作酒筹醉折花枝作酒筹2021-06-04 17:05:09原创86

    在html中,可以使用list-style-type属性来自定义有序列表,只需要给ol元素设置“list-style-type:类型”样式即可。list-style-type属性设置列表项标记的类型。

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

    list-style-type 属性设置列表项标记的类型。

    语法:

    元素{
    list-style-type:类型;
    }

    属性值:

    Q{J$KNH27KZ}EKPWXMB[WH2.png

    示例:

    <html>
      <head>
        <style type="text/css">
          ul.circle {
            list-style-type: circle;
          }
          ul.square {
            list-style-type: square;
          }
          ol.upper-roman {
            list-style-type: upper-roman;
          }
          ol.lower-alpha {
            list-style-type: lower-alpha;
          }
        </style>
      </head>
    
      <body>
        <p>Type circle:</p>
        <ul class="circle">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ul>
    
        <p>Type square:</p>
        <ul class="square">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ul>
    
        <p>Type upper-roman:</p>
        <ol class="upper-roman">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ol>
    
        <p>Type lower-alpha:</p>
        <ol class="lower-alpha">
          <li>Coffee</li>
          <li>Tea</li>
          <li>Coca Cola</li>
        </ol>
      </body>
    </html>

    效果:

    S8$1JNEMP(]$SPR{06ZG4IV.png

    推荐学习:html视频教程

    以上就是html有序列表怎么弄自定义的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html
    上一篇:html怎么在文本中保留空格 下一篇:HTML除了maxlength如何限制长度
    第16期线上培训班

    相关文章推荐

    • html如何插入swf内容• html怎么添加音乐mp3• html怎么改网页标题• html有哪些行内块元素• html标签分类有哪些

    全部评论我要评论

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

    PHP中文网