CSS设置列表的符号

最新推荐文章于 2024-01-30 16:13:15 发布

量变决定质变

最新推荐文章于 2024-01-30 16:13:15 发布

阅读量4.1k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52903893

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置列表的符号

通常的列表采用<ul>或者<ol>标记，然后，结合<li>标记罗列各个项目。

项目表单实例，代码如下：

<span style="font-size:24px;"><html>
       <head>
              <title>
                     项目列表
              </title>
              <style>
                     <!--
                     body{
                     background-color:#c1daff;
              }
                     ul{
                     font-size:0.9em;
                     color:#00458c;
              }
                     -->
              </style>
       </head>   
       <body>
              <p>水上运动</p>
              <ul>
                     <li>freestyle自由泳</li>
                     <li>backstroke仰泳</li>
                     <li>breaststroke蛙泳</li>
                     <li>butterfly蝶泳</li>
                     <li>individualmedley 个人混合泳</li>
                     <li>freestylerelay 自由泳接力</li>
              </ul>
       </body>
</html></span>

CSS通过list-style-type属性设置列表的编号，无论是<ul>标记，还是<ol>标记都可以使用相同的属性值，二者的效果完全相同。

<span style="font-size:24px;">ul{
                     font-size:0.9em;
                     color:#00458c;
                     list-style-type:decimal;
              }</span>

Decimal属性值，项目列表的编号安装十进制编号显示。

当给<ul>或者<ol>标记设置list-style-type属性时，中间所有的<li>标记都会采用该设置。

如果，对某一个<li>标记单独设置list-style-type属性，则仅仅作用于该条项目上。

<span style="font-size:24px;"><html>
       <head>
              <title>
                     项目列表
              </title>
              <style>
                     <!--
                     body{
                     background-color:#c1daff;
              }
                     ul{
                     font-size:0.9em;
                     color:#00458c;
                     list-style-type:decimal;
              }
                     li.special{
                     list-style-type:circle;
              }
                     -->
              </style>
       </head>   
       <body>
              <p>水上运动</p>
              <ul>
                     <li>freestyle自由泳</li>
                     <li>backstroke仰泳</li>
                     <liclass="special">breaststroke 蛙泳</li>
                     <li>butterfly蝶泳</li>
                     <li>individualmedley 个人混合泳</li>
                     <li>freestylerelay 自由泳接力</li>
              </ul>
       </body>
</html></span>

可以看到蛙泳变成了空心圆显示，其他的还是编号。

此外，该属性的属性值还有很多，如下：