原生html+css实现五星好评

最新推荐文章于 2023-04-20 10:14:13 发布

Tonglanlinling

最新推荐文章于 2023-04-20 10:14:13 发布

阅读量3.1k

点赞数 8

分类专栏： html 文章标签： html css 原生HTML和CSS 五星好评

本文链接：https://blog.csdn.net/Tonglanlinling/article/details/89048368

版权

html 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

效果展示:

代码展示:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 20px;

        }
        .parent1 {
            display: inline-block;
            width: 15px;
            height: 17px;
            margin-left: 15px;
            background: url("images/iconlist_1.png") no-repeat -184px -238px;
        }
        .parent1:hover {
            background: url("images/iconlist_1.png") no-repeat -109px -238px;
        }
        .parent2 {
            display: inline-block;
            width: 30px;
            height: 15px;
            margin-left: 15px;
            background: url("images/iconlist_1.png") no-repeat -184px -238px;
        }
        .parent2:hover {
            background: url("images/iconlist_1.png") no-repeat -109px -238px;
        }
        .parent3 {
            display: inline-block;
            width: 45px;
            height: 15px;
            margin-left: 15px;
            background: url("images/iconlist_1.png") no-repeat -184px -238px;
        }
        .parent3:hover {
            background: url("images/iconlist_1.png") no-repeat -109px -238px;
        }
        .parent4 {
            display: inline-block;
            width: 60px;
            height: 15px;
            margin-left: 15px;
            background: url("images/iconlist_1.png") no-repeat -184px -238px;
        }
        .parent4:hover {
            background: url("images/iconlist_1.png") no-repeat -109px -238px;
        }
        .parent5 {
            display: inline-block;
            width: 75px;
            height: 15px;
            background: url("images/iconlist_1.png") no-repeat -184px -238px;
            line-height: 20px;
        }
        .parent5:hover {
            background: url("images/iconlist_1.png") no-repeat -109px -238px;
        }
    </style>
</head>
<body>

<span class="parent5">
    <span class="parent4">
        <span class="parent3">
            <span class="parent2">
                <span class="parent1">
                </span>
            </span>
        </span>
    </span>
</span>
</body>
</html>

图片资源:

---------------------
作者：Tonglanlinling
来源：CSDN
原文：https://blog.csdn.net/Tonglanlinling/article/details/88380465
版权声明：本文为博主原创文章，转载请附上博文链接

Tonglanlinling

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
4
评论
原生html+css实现五星好评

效果展示:代码展示:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0;...
复制链接

扫一扫