Question

discuz如何实现文章列表前的小图标

例如：新浪首页视频列表前的小图标是如何实现的？请求懂的人帮助

Answer 1

其实很简单。

diy默认的列表代码类似这样的

<div class="module cl xl xl1">
<ul>
[loop]
<li><a href="{url}" title="{title}"{target}>{title}</a></li>
[/loop]
</ul>
</div>

改造：去掉class="module cl xl xl1"  例如换成class="video-list"，然后在每个<li>里加个<em></em>，再加上对应的css，完整代码如下：

<style>
.video-list li{padding-left:25px;}
.video-list li em{background:url(图标地址) no-repeat center center;}
</style>
<div class="video-list">
<ul>
[loop]
<li><em></em><a href="{url}" title="{title}"{target}>{title}</a></li>
[/loop]
</ul>
</div>

图标地址自己换下，<em>的背景图就是那个摄像机的图标。

因背景不占位，所以要让<li>内左边距让出25px。

css代码最好放css文件里去。

哎，或许em多余了。。

直接在.video-list li里加背景图，x轴左，y轴居中，依然让出25px，这也是可以的。

追问

谢谢您的回答。

我按理解进行了以下操作。

1、将代码全部复制到文章模块模板中，保存后没显示图标，只是黑点没了，不知道哪里没设置好

　　

2、您所说的css代码放到哪个css文件中，我用的是默认模板，是放到template\default\common\common.css吗？

请您再指点下：）

追答

你打开这个图片地址 看看能不能看到图。
css也可以放到common.css里。

追问

我将代码改成这样的

显示效果为：

虽然图标可以显示了，但是和新浪的还是有区别的，比如：1、新浪的图标和文字是一个整体，都含有链接，但我的这种方式，图标和文字是分开的，图标无链接

2、新浪的图标前还是有<li>默认的圆点，我的没有

新浪应该不是用这种方式实现的

追答

圆点可以有，也许这样更美观。

图标和链接在不在一起这有什么影响？有点吹毛求疵了。
我给你的是我自己写的，如果你要和新浪一样。
那就这个思路：
背景是红色的点图标。不平铺，X轴左，Y轴居中，css里padding-left:10px;让出圆点位置。
不要了。
的背景放你这旗帜图标，不平铺，X轴左，Y轴居中。同时a的css里padding-left:-25px;让出图标位置。
这样前有点，内有旗帜图标，且图标在链接范围内。

追问

按照你的方法，实现了！哈哈，不是吹毛求疵，就是想知道新浪到底怎么实现的 : )

非常感谢 : )