Partagez un exemple de code pour implémenter une note cinq étoiles en utilisant du CSS pur

CSSGAMES : Pure CSS obtient un effet d'évaluation cinq étoiles. Les amis intéressés peuvent y jeter un œil.

Téléchargez le code :

<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>

Ça fait du bien.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo CSS en ligne gratuit

3 php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!