純粋な CSS を使用して 5 つ星評価を実装するサンプル コードを共有する

零下一度
リリース: 2017-05-13 14:27:16
オリジナル
2032 人が閲覧しました

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 バージョンのダウンロード

2. CSS オンラインビデオチュートリアル

3. Jiijian (2) - CSS ビデオチュートリアル

以上が純粋な CSS を使用して 5 つ星評価を実装するサンプル コードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!