您的位置：首页 > 其它

模仿淘宝评价的星级显示

2015-11-26 16:51 351 查看

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
<title>stars_show</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
</head>
<body>
<div class="shop_item_star">
<div class="star4"></div>
<div class="shop_star"></div>
</div>
</body>
</html>

CSS代码部分：
@charset "utf-8";
/****************************************** star ********************************************************/
.shop_item_star .shop_star, .shop_item_star .star1, .shop_item_star .star2, .shop_item_star .star3, .shop_item_star .star4, .shop_item_star .star5 {
background: url("stars_icons.png") no-repeat scroll -72px -22px #fff;
height: 20px;
position: absolute;
width: 100px;
z-index: 10;
}
.shop_item_star .shop_star {
background-position: -72px 0;
position: static;
z-index: 1;
}
.shop_item_star .star1 {
width: 18px;
}
.shop_item_star .star2 {
width: 36px;
}
.shop_item_star .star3 {
width: 54px;
}
.shop_item_star .star4 {
width: 72px;
}
.shop_item_star .star5 {
width: 90px;
}
图片：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航