效果展示:
代码展示:
<!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
原文：/Tonglanlinling/article/details/88380465
版权声明：本文为博主原创文章，转载请附上博文链接
