纯CSS绘制星星评分特效

浏览数：20 / 时间：2015年06月09日

只需要用两个图标即可实现：

技术分享
技术分享
实现效果如下：
技术分享
以下为代码：
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>星级评分展示CSS样式技巧</title>
<styletype="text/css">
.vote-star{
display:inline-block;/*内联元素转换成块元素，并不换行*/
margin-right:6px;
width:75px;/*5个星星的宽度*/
height:15px;/*1个星星的高度*/
overflow:hidden;
vertical-align:middle;
background:url(../content/images/group/starsblack.png) repeat-x;}
.vote-star i{
display:inline-block;/*内联元素转换成块元素，并不换行*/
height:15px;/*1个星星的高度*/
background:url(../content/images/group/starsyellow.png) repeat-x 00;}
.vote-number{
vertical-align:middle;
font-family:微软雅黑,Verdana,Geneva, sans-serif;
font-size:12px;}
</style>
</head>
<body>
<divclass="star">
<spanclass="vote-star"><istyle="width:97%"></i></span><spanclass="vote-number">9.7分</span>
</div>
</body>
</html>

     

在项目中，可以将span标签换成div都可以
 





 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com 代码 src http si html class style log com 代码 src http si html

相关文章

随机文章

您可能还喜欢

您可能还喜欢