您的位置：首页 > Web前端 > CSS

CSS设置图片符号

2016-11-06 20:10 113 查看
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>标记的样式，并统一文字和图标之间的距离，从而，实现了各个浏览器之间的效果一致。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航