Question

我有一个导致他们个人资料的学生链接列表，所以我想要笑脸而不是正常的圆形子弹点。图片是14x14。我该怎么做才能让子弹只用CSS？

ul {
  list-style-type:url(smiley.tiff);
  text-transform:capitalize;
}

Answer 1

使用CSS背景。 list-style-image没有给你定位选项，而且看起来很糟糕。根据您的布局调整像素值。

li.icon {
     background-image:url(...);
     background-repeat:no-repeat;
     background-position:3px 3px;
     min-height:16px;
     padding-left:20px;
}

BTW - 不要使用TIFF（并且所有浏览器都不支持TIFF），文件可能会很大。将其转换为PNG。

Answer 2

请改用list-style-image CSS rule。而且，为了以防万一，用引号括起网址;大多数浏览器在没有它们的情况下正确解释它，但这是一种很好的做法。

list-style-image: url('smiley.tiff');

Answer 3

最简单的方法是设置：

ul { 
  list-style-image: url(‘images/sample-bullet.png’)
}

这样您就可以选择所需的任何图像。有一篇关于子弹样式的文章很棒我认为你可以从here中受益。

Answer 4

只是简单使用字体真棒，使list-style：none并使用简单的字体真棒图标快乐编码：D

在CSS中制作自定义项目符号

4 个答案: