首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET 自訂控件(一):簡易星級控件——CSS 背景定位實現實心/空心星切換

     編輯:關於ASP.NET

目標:五顆星評分,實心對應分數,空心補足。兩層 div + CSS background-repeat: repeat-x 完美解決:

  • 外層 div:固定寬度 5 顆星寬,背景圖為空心星橫向重複。
  • 內層 div:寬度 = 分數 × 單顆星寬度,背景圖為實心星橫向重複,覆蓋外層對應區域。

單一圖檔含實心/空心兩排,配合 background-position 切換。屬性僅兩個:

屬性說明
Comment評分項目註釋
Score分數(決定實心寬度)

繼承 WebControl,RenderContents 輸出表格 + 兩層 div,零圖片 <img> 標籤,極輕量。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved