淘先锋技术网

首页 1 2 3 4 5 6 7

淘宝评星是淘宝商家与买家交流重要的一种方式,通过对订单的评价可以快速了解商品质量以及商家服务的好坏。模仿淘宝评星的html代码能够让我们更好地理解淘宝的评价系统,同时也有助于我们在实际开发中使用类似的评价模块。


4.5分

模仿淘宝评星html代码

首先我们需要创建一个名为star-wrap的div容器,用来放置五颗星星以及评分显示。五颗星星由五个名为star的i标签组成,其中star-full代表一个填充的星星,star-half代表一个半填充的星星。为了便于样式调整,我们可以将评分显示也放在star-wrap中,添加一个名为score的span标签即可。接下来我们可以使用css样式来美化星星的外观,例如:


.star-wrap {
  display: inline-block;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
} 
.star {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(star.png) no-repeat 0 0;
} 
.star-full {
  background-position: 0 0;
} 
.star-half {
  background-position: 0 -15px;
} 
.score {
  display: inline-block;
  font-size: 12px;
  color: #ffba00;
  margin-left: 5px;
}

上述代码中,我们为star-wrap设置了display:inline-block属性,该属性可以让div容器水平排列。同时为了保证星星之间没有空隙,我们将font-size和line-height设置为0,这样星星之间的空隙将会被消除。接下来就是为星星添加样式,例如为star-full的星星设置背景图片为star.png,并设置background-position属性来确定星星图标的位置。最后为评分显示设置颜色和左外边距属性。

以上就是模仿淘宝评星html代码的实现方法,通过这种方式可以让我们更好地理解淘宝的评价系统,并在实际开发中使用类似的评价模块。