CSS设置图片符号

最新推荐文章于 2023-08-19 01:13:51 发布

量变决定质变

最新推荐文章于 2023-08-19 01:13:51 发布

阅读量1.8k

点赞数 2

分类专栏： ————CSS

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

版权

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

39 篇文章 2 订阅

订阅专栏

CSS设置图片符号

CSS可以通过list-style-image属性，将项目符号显示为任意的图片。

<span style="font-size:24px;"><html>
       <head>
              <title>
                     图片符号
              </title>
              <style>
                     <!--
                     body{
                     background-color:#c1daff;
              }
                     ul{
                     font-family:Arial;
                     font-size:13px;
                     color:#00458c;
                     list-style-image:url(http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
              }
                     -->
              </style>
       </head>   
       <body>
              <p>自行车</p>
              <ul>
                     <li>Road cycling 公路自行车赛</li>
                     <li>Track cycling 场地自行车赛</li>
                     <li>spring 追逐赛</li>
                     <li>time trial 计时赛</li>
                     <li>points race 计分赛</li>
                     <li>pursuit 争先赛</li>
                     <li>Mountain bike 山地自行车赛</li>
       </body>
</html></span>

此时，每个项目符号都显示为一个小图标，但是这种方式并不推荐，因为，仔细观察在IE和Firefox中，图片符号和文字之间的距离有明显的区别。

建议，将list-style-type属性值设置为none，然后，修改<li>标记的背景属性background来实现。

<span style="font-size:24px;"><html>
       <head>
              <title>
                     图片符号
              </title>
              <style>
                     <!--
                     body{
                     background-color:#c1daff;
              }
                     ul{
                     font-family:Arial;
                     font-size:13px;
                     color:#00458c;
                     list-style-image:none;
              }
                     li{
       background:url(http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg)no-repeat;
                     padding-left:25px;
              }
                     -->
              </style>
       </head>   
       <body>
              <p>自行车</p>
              <ul>
                     <li>Road cycling 公路自行车赛</li>
                     <li>Track cycling 场地自行车赛</li>
                     <li>spring 追逐赛</li>
                     <li>time trial 计时赛</li>
                     <li>points race 计分赛</li>
                     <li>pursuit 争先赛</li>
                     <li>Mountain bike 山地自行车赛</li>
       </body>
</html></span>

这样，通过先隐藏<ul>标记中的项目列表，然后，再设置<li>标记的样式，并统一文字和图标之间的距离，从而，实现了各个浏览器之间的效果一致。