【原创】网址大全工具栏修改一

来源:互联网   编辑:思良  发表时间:2016-01-14  关注度:707  

多背景模式:即每篇文章的背景是一个图片,

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;

}

模版代码, 标签代码和上面一样,这样效果图:


下一篇:【原创】修改从百度空间转过来的文章--正常显示图片(20160104)


上一篇:【原创】增加一个站长心情栏目


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。