用CSS打造評分星級效果的一個實例_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      


						　　用純css打造星級評分效果正在被越來越多地應用在網絡中，結合ajax等技術，可以渲染出很出色的視覺效果和很棒的用戶體驗。
      　　首先用中文寫一下這個效果的算法：
      　　1. 使用背景圖片的位置切換來獲得星級效果；


      　　2. 整個效果最要害的地方就是“三層理論”，整個效果分為三層——空分層、分數層和打分層，三層的布局均為absolute，以避免ul本身自帶的相對布局（當然用div也可以獲得同樣效果）；
      　　3. 空分層就是使用背景圖片中的“空星”作為背景，并橫向平鋪；
      　　4. 分數層的寬度等于（分數*圖片寬度）得到的數值，并且使用背景圖片中的“分數星（例子中為黃色）”作為背景橫向平鋪；
      　　5. 打分層就是將5個空鏈接置于5個星星的位置上（寬度要和背景圖片吻合），并將5個a：hover的背景設為“打分星（這里為綠色）”，寬度設為星數*圖片寬度，left為0(靠左，這樣結合a：hover不同的寬度就可以出現打分效果)，垂直坐標小于a的垂直坐標（以確保當前a：hover不會遮擋住其他鏈接）；

      　　我們看看xhtml代碼：
      示例代碼 [www.wf0088.com]
      <ul class="star-rating">
      <li class="current-rating">Currently 3.5/5 Stars.</li>
      <li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
      <li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
      <li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
      <li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
      <li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
      </ul> 

      　　我們看CSS是如何定義的：

      示例代碼 [www.wf0088.com]
      .star-rating{
      list-style:none;
      margin: 0px;
      padding:0px;
      width: 150px;
      height: 30px;
      position: relative;
      background: url(images/star_rating2.gif) top left repeat-x; 
      }
      .star-rating li{
      padding:0px;
      margin:0px;
      /*\*/
      float: left;
      /* */
      }
      .star-rating li a{
      display:block;
      width:30px;
      height: 30px;
      text-decoration: none;
      text-indent: -9000px;
      z-index: 20;
      position: absolute;
      padding: 0px;
      }
      .star-rating li a:hover{
      background: url(images/star_rating2.gif) left center;
      z-index: 2;
      left: 0px;
      }
      .star-rating a.one-star{
      left: 0px;
      }
      .star-rating a.one-star:hover{
      width:30px;
      }
      .star-rating a.two-stars{
      left:30px;
      }
      .star-rating a.two-stars:hover{
      width: 60px;
      }
      .star-rating a.three-stars{
      left: 60px;
      }
      .star-rating a.three-stars:hover{
      width: 90px;
      }
      .star-rating a.four-stars{
      left: 90px;
      } 
      .star-rating a.four-stars:hover{
      width: 120px;
      }
      .star-rating a.five-stars{
      left: 120px;
      }
      .star-rating a.five-stars:hover{
      width: 150px;
      }
      .star-rating li.current-rating{
      background: url(images/star_rating2.gif) left bottom;
      position: absolute;
      height: 30px;
      width:105px;
      display: block;
      text-indent: -9000px;
      z-index: 1;
      } 

      　　我們看最后的運行效果：

       代碼調試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運行查看效果 ]

      　　




      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-03-28


      

      



      


      



      相關DIV+CSS實例：