CSSGAMES: 純粋な CSS は 5 つ星の評価効果を実現します。興味のある方はぜひご覧ください。
コード:
<style type =“text / css”> 。容器{ 宽度:250px; height:50px; 位置:亲戚; 边框:1px纯红色; } UL { 保证金:0; 填充:0; 位置:绝对 list-style:none; 宽度:100%; 身高:100%; 溢出:隐藏; } 李{ z-index:1; 宽度:20%; 身高:100%; float:left; 背景:#faf; border-radius:50%; / * box-shadow:2px red inset; * / } 李:悬停+跨度{ 显示:块; z-index:99; 宽度:500%; 身高:100%; float:left; 背景:#afa; } .backer { 位置:绝对 宽度:100%; 身高:100%; } .backer li { 背景:#999; } </样式>
<div class =“container”> <div class =“backer”> <UL> <li> </ li> <li> </ li> <li> </ li> <li> </ li> <li> </ li> </ UL> </ DIV> <UL> <li class =“li1”> </ li> <span> </ span> <li class =“li2”> </ li> <span> </ span> <li class =“li3”> </ li> <span> </ span> <li class =“li4”> </ li> <span> </ span> <li class =“li5”> </ li> <span> </ span> </ UL> </ DIV> <div>另一个div </ div>
かなり良い感じです。
【関連推奨事項】
1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード
3. Jiijian (2) - CSS ビデオチュートリアル
以上が純粋な CSS を使用して 5 つ星評価を実装するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。