【贵族丽人网】风格免费分享之三-查看页漂亮的顶踩

支持网站：
贵族丽人网
http://www.vvnv.cn
展示页面：
http://www.vvnv.cn/viewnews-25019



技术支持：578676980  
1.替换news_view.html.php中的内容

1. <div id="xspace-rates" class="block">
   
2. <div class="mark" align="center">
   
3.                 <div id="mark0" onmouseover="this.style.backgroundPosition='0 0'" onmouseout="this.style.backgroundPosition='-189px 0'" onfocus="this.blur()" onClick="sEval($news[itemid],1)"; oonclick="setRateXML('1', '$news[itemid]');">
   
4.                 <div class="bar"><div id="eimg1" style="width:0px;float:left;"></div></div>
   
5.                 <span id="barnum1"><span id="sp1"></span>  (<span id="s1">$news[goodrate]</span>)</span>
   
6.                 </div>
   
7.                 <div id="mark1" onmouseover="this.style.backgroundPosition='-567px 0'" onmouseout="this.style.backgroundPosition='-378px 0'" onfocus="this.blur()" onClick="sEval($news[itemid],-1)"; oonclick="setRateXML('-1', '$news[itemid]');">
   
8.                 <div class="bar"><div id="eimg2" style="width:0px; float:left;"></div></div>
   
9.                 <span id="barnum2"><span id="sp2"></span>  (<span id="s2">$news[badrate]</span>)</span>
   
10.                 </div>       
    
11. </div>
    
12. <input type="hidden" id="xspace-rates-value" name="rates" value="0" />
    
13. <p style="display:none;">评分：<span id="xspace-rates-tip">0</span></p>
    
14. </div>
    
15. <center><a href="javascript:;" onclick="report($news[itemid])" title="文章有问题，显示不全，内容不符，违法信息！快快举报！"><font color=red><B>举报</B></font></a>您认为《$news[subject]》对您有用吗？支持就顶下！<a href="#" title="点击回到页面顶部" ><font color=red><B>TOP</B></font></a></center>
    
16.         <script language="javascript" src="/js/ding.js"></script>
    
17. <script type="text/javascript">
    
18. function G(id){return document.getElementById(id);}
    
19.         var sUp=$news[goodrate];
    
20.         var sDown=$news[badrate];
    
21.         var sTotal=sUp+sDown;
    
22.         var spUp = 0;
    
23.         if (sTotal != 0) {
    
24.                 spUp = (sUp/sTotal)*100;
    
25.         }
    
26.         spUp=Math.round(spUp*10)/10;
    
27.         var spDown=0;
    
28.         if (sTotal != 0) {
    
29.                 spDown = 100-spUp;
    
30.         }
    
31.         spDown=Math.round(spDown*10)/10;
    
32.         G('sp1').innerHTML=spUp+'%';
    
33.         G('sp2').innerHTML=spDown+'%';
    
34.         G('eimg1').style.width = parseInt((sUp/sTotal)*54);
    
35.         G('eimg2').style.width = parseInt((sDown/sTotal)*54);
    
36. </script>

复制代码

2.将以下代码加入到comen.css (页面调用的css)文件中

1. /* Commnet star style */
   
2. #xspace-rates { text-align: center; background: #FFF; padding: 10px 0 20px 0; border-bottom: none; margin-bottom: 0; }
   
3. #xspace-rates-bg { width: 5000px; }
   
4. #xspace-rates-star { }
   
5. #xspace-rates-a {  }
   
6. #xspace-rates a { float: left; text-align: center; width: 189px; height: 67px; margin:0 10px; overflow: hidden; }
   
7. /* .xspace-rates-5 { width: 30px; }
   
8. .xspace-rates-3 { width: 60px; }
   
9. .xspace-rates-1 { width: 90px; }
   
10. .xspace-rates0 { width: 120px; }
    
11. .xspace-rates1 { width: 150px; }
    
12. .xspace-rates3 { width: 180px; }
    
13. .xspace-rates5 { width: 210px; }*/
    
14. a.newbtn {position:relative;font-size:120px;}
    
15. a.newbtn .pos_1{position:absolute;top:2px;left:18px;}
    
16. a.newbtn .pos_2{position:absolute;top:27px;left:0px; width:60px;height:15px;text-align:center;font-size:12px;line-height:normal;}
    
17. a.newbtn .pos_3{position:absolute;top:17px;left:0px; width:60px;height:15px;text-align:center;font-size:12px;line-height:normal;}
    
18. a.newbtn:link, a.newbtn:visited, a.newbtn:hover, a.newbtn:active {text-decoration:none;}
    
19. a.newbtn_box1{color:#F00;}
    
20. a.newbtn_box2{color:#360;}
    
21. 
    
22. 
    
23. .buttons{margin:20px 12px 12px;text-align:left;}
    
24. .buttons img{margin:0 5px 0 0;}
    
25. .mark{padding:15px 0 0 150px;overflow:hidden;zoom:1;}
    
26. #mark0, #mark1{width:189px;height:48px;background:url(/images/mark12.gif) no-repeat -189px 0;border:0;cursor:pointer;position:relative;margin:0;padding:0;overflow:hidden;float:left;}
    
27. 
    
28. #mark1{background-position:-378px 0;margin-left:10px;}
    
29. .bar{position:absolute;left:9px;top:16px;width:55px;height:10px;border:1px solid #40a300;background-color:#fff;overflow:hidden;text-align:left;}
    
30. #mark1 .bar{border-color:#555;}
    
31. .bar div{background:url(/images/sprites.gif) repeat-x 0 -228px;height:20px;overflow:hidden; text-align:left;}
    
32. #mark1 .bar div{background-position:0 -255px;}
    
33. #barnum1, #barnum2{position:absolute;top:15px;left:70px;font:400 12px/14px arial;color:#333;}

复制代码

3.将附件中的顶放到网站根目录js文件夹下
4.将附件中的images文件夹中的两个文件上传到网站根目录images文件夹下

.

不错不错，收啦