您的位置:首页 > 教程 > HTML > html有序列表怎么弄自定义

html有序列表怎么弄自定义

2021-06-05 07:25:08 来源:易采站长站 作者:

html有序列表怎么弄自定义,属性,类型,列表,标记,元素

html有序列表怎么弄自定义

易采站长站,站长之家为您整理了html有序列表怎么弄自定义的相关内容。

在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有序列表怎么弄自定义的详细介绍。欢迎大家对html有序列表怎么弄自定义内容提出宝贵意见

微信扫一扫

易采站长站微信账号