首页 > 网站 > 建站经验 > 正文

SupeSite默认焦点轮转图简单美化方法_SupeSite教程

2024-08-30 19:09:15
字体:
来源:转载
供稿:网友
先上最终效果图:
jiaodian.jpg 

方法很简单,需要修改的代码很少:

1、打开templates/default/下的index.html.php文件,找到如下代码:
  1. <div id="focus_turn"> 
  2. <!--{if !empty($_SBLOCK['hotnewspic'])}--> 
  3. <ul id="focus_pic"> 
  4. <!--{eval $j = 0}--> 
  5. <!--{loop $_SBLOCK['hotnewspic'] $pkey $pvalue}--> 
  6. <!--{eval $pcurrent = ($j == 0 ? 'current' : 'normal');}--> 
  7. <li class="$pcurrent"><a href="$pvalue[url]"><img src="$pvalue['a_filepath']" alt="" /></a></li> 
  8. <!--{eval $j++}--> 
  9. <!--{/loop}--> 
  10. </ul> 
  11. <ul id="focus_tx"> 
  12. <!--{eval $i = 0}--> 
  13. <!--{loop $_SBLOCK['hotnewspic'] $key $value}--> 
  14. <!--{eval $current = ($i == 0 ? 'current' : 'normal');}--> 
  15. <li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li> 
  16. <!--{eval $i++}--> 
  17. <!--{/loop}--> 
  18. </ul> 
  19. <div id="focus_opacity"></div> 
  20. <!--{/if}--> 
  21. </div><!--focus_turn end--> 

(说明:控制轮转图的代码,这个大家都知道)

2、把上面代码中的
  1. <div id="focus_opacity"></div> 

移动到上面代码中的
  1. <ul id="focus_tx"> 
  2. <!--{eval $i = 0}--> 
  3. <!--{loop $_SBLOCK['hotnewspic'] $key $value}--> 
  4. <!--{eval $current = ($i == 0 ? 'current' : 'normal');}--> 
  5. <li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li> 
  6. <!--{eval $i++}--> 
  7. <!--{/loop}--> 
  8. </ul> 

的上面,即<ul id="focus_tx">的上面。
(说明:focus_opacity是控制默认轮转图的底部白色透明条的,因为要把底部文字说明(即focus_tx)放在白色透明条的上方,所以先移动下顺序,如果不移动会造成文字说明被白色透明条遮住)

3、修改
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
中的
margin:5px 0 0 12px;

margin:-40px 0 0 12px;

主要是修改了距顶的位置(-40px),具体数值大小,需要自己适当调整。(说明:通过把底部说明文字的距顶数值改为负值,把底部说明文字移动白色透明条的同样高度。)

4、修改好上面的,刷新后发现错位,别急,接下来打开CSS文件(templates/default/css/目录下)common.css,找到如下代码:

#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
在其中间添加
position:absolute;

(说明:现在正常了,但白色透明条的颜色太淡,不协调。继续往下看。)

5、然后继续在css文件中查找到
#focus_opacity {  position:absolute; left:14px; bottom:41px; width:350px; height:24px; background:#FFF; opacity:0.4; filter:alpha(opacity=40); }
修改背景色为黑色,即修改
background:#FFF;
中的#FFF为#000。
(说明:换个黑色的背景,让文字更突出。修改背景色的时候,你也可以修改为其他颜色,同时还可以通过修改
filter:alpha(opacity=40);
中的值(即那个opacity=40)来控制其透明度,数值范围为0~100。)

6、刷新下看看效果,文字不明显了,这是因为文字的颜色和背景色一样造成的,接下来在CSS文件中找到
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
#focus_tx .normal { display:none; }
在“#focus_tx"和"#focus_tx .normal”中间添加一段CSS代码
#focus_tx a { color:#FFF; }
如果想让这部分文字加粗或是字号增大/减小,可以在
#focus_tx a { color:#FFF; }
中添加font-weight:700;(文字粗体)和font-size:14px;(字号大小),具体的数值调整自己喜欢为止。

其他:
修改图片序号(即上图中的1、2、3)的背景颜色、文字颜色、和边框颜色的方法:

修改边框颜色、样式:
1、修改
#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
中的background的值控制背景色,color控制文字颜色。

3、修改未选中图片的序号的背景颜色和文字颜色的方法同上,修改的代码是
#focus_btn .normal { background:#FFF; color:#1A4963; }
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表