█ 【窝居郑州】贴子里图片CSS美化，让你的贴子图片更有质感(不喜勿入)

好久没有来DZ上发布共享了！原因了解窝居郑州论坛的朋友可能不说自明，今天有朋友问我我贴子里面的图片如果通过CSS美化的，就在此给大家共享一下！
希望能帮到有需要的朋友，高手就当笑谈而过，请口下留情！实在是怕了！

效果地址：http://www.wj371.com/thread-1994-1-1.html

想点开看就看一下，不想点开别在骂骂咧咧说骗你IP！

本例所用素材：

您可以根据需要自己设计图片背景！

具体方法：

1：把附件中所用的背景图片上传至你的图片目录！


2：在你的模板的CSS文件中添加如下样式：

.t_f img{ border-left:1px solid #eee;border-top:1px solid #eee; padding:4px 10px 10px 4px; background-image:url(图片路径/picDivB.gif); background-position:right bottom; background-repeat:no-repeat;}
.t_f img[smilieid]{ border-left:none;border-top:none; padding:0px; background-image:none;}


CSS说明：
　　第一句已经实现本例中图片样式了，第二句的目的为了防止发布的表情应用此样式！
注意:
　　因为大家所用板子不同，所以其中的图片路径要根据你的模板调整，实在不行就用相对根目录路径也可以！

更新缓存！OK！


以下是12月26日更新

针对32楼的hhxhni 提出的问题补充：改进IE6下禁止表情也会出现背景的问题

因为IE6不支持CSS伪类选择，所以出现32楼hhxhni所说表情也加了此样式的问题，解决此问题的方案是不使用CSS的伪类选择表情元素，改用JQUERY来变通选择！如果想支持IE6，请按照下面的方法来实现！

具体方法(支持IE6)：

1：把附件中所用的背景图片上传至你的图片目录！


2：在你的模板的CSS文件中添加如下样式：

.t_f img{ border-left:1px solid #eee;border-top:1px solid #eee; padding:4px 10px 10px 4px; background-image:url(图片路径/picDivB.gif); background-position:right bottom; background-repeat:no-repeat;}

3：在你的模板的viewthread.htm文件中找到"<!--{subtemplate common/header}-->"（如果没有动过模板，也即是第一行），在此下面添加如下JUQERY引用代码：

<!--Jquery引用-->
<script type="text/javascript" src="{IMGDIR}/jquery-1.4.2.min.js?{VERHASH}"></script>
<script language="javascript">
jQuery.noConflict();
</script>：

对于JQUERY的JS文件下载：
然后将这个文件传到"/static/image/common/"目录下，如果以前有这个文件的话，可以不再上传，但要注意上面的"jquery-1.4.2.min.js"要改成你以前的jquery的文件名(也即是引用与你的jquery文件保持一致即可)

4：继续在模板的viewthread.htm文件中找到"<!--{subtemplate common/footer}-->"（如果没有动过模板，也即是本文件的最后一行），在此行上面添加如下JS代码：

<script type="text/javascript">
jQuery(function(){
　　jQuery("img[smilieid]").addClass("smilieid");
});
</script>

更新缓存！OK！

不错，就是没有分享出来

jacklee007 发表于 2010-12-22 11:50
不错，就是没有分享出来

正在编辑！

不错了  支持下

哈哈哈哈 不错

支持！！！

不错的东西。现收藏了。