【原创】网址大全工具栏修改一
多背景模式:即每篇文章的背景是一个图片,
CSS:
.game_dlist04 { padding:10px 0 10px 25px; overflow:hidden;}
.game_dlist04 li { float:left;text-align:center; width:80px; height:40px;margin:0 15px 0 0;}/*15PX是并排二行间距,即:如何在企业网和修改好网页版之间的距离是15 */
.game_dlist04 li a{ text-align:center; line-height:35px; }
.nno1 {
background: url(../../default/images/rss1.gif) no-repeat 0 10px;padding-left: 15px; /*15PX是文字居右15距离,即如何在企业网离右边15,刚刚到背景位置*/
}
.nno2 {
background: url(../../default/images/rss2.gif) no-repeat 0 10px;padding-left: 15px;
}
模版代码:
<h3>推荐资讯</h3>
<div id="gamelist">
<ul class="game_dlist04 box01">
[ecmsinfo]0,12,12,0,3,26,0[/ecmsinfo]
</ul>
</div>
标签代码:
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
<li class="nno[!--no.num--]"><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a></li>
class="nno[!--no.num--]"刚好实现动态给出nno1-12,这样每个文字前面有不同背景图片了(测试就只用了一个背景图)。效果图:
单背景模式:即只要一个背景图片就可以了,所用到图片都集中到这个背景了。用到CSS Sprite切图技术。
CSS:
.game_dlist04 { padding:10px 0 10px 25px; overflow:hidden;}
.game_dlist04 li { background-image: url(https://p1.ssl.qhimg.com/t0101175b7309951078.png) ;float:left;text-align:center; width:80px; height:35px;margin:0 15px 0 0;}/*15PX是并排二行间距,即:如何在企业网和修改好网页版之间的距离是15 */
.game_dlist04 li a{ text-align:center; line-height:35px; }
.nno1 {
background: no-repeat scroll 0 -20px;padding-left: 15px;
}
.nno2 {
background: no-repeat scroll 0 -52px;padding-left: 15px;
}
模版代码, 标签代码和上面一样,这样效果图: