五星评价

最新推荐文章于 2023-07-19 11:27:57 发布

smartwange

最新推荐文章于 2023-07-19 11:27:57 发布

阅读量161

点赞数

分类专栏： html 文章标签： star

本文链接：https://blog.csdn.net/qq_21383977/article/details/80974489

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--http://iconfont.cn-->
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_739870_2yj5kvhhg4d.css"/>
		<style type="text/css">
				.detail {
				  position: absolute;
				  text-align: right;
				  right: 5px;
				  bottom: 5px;
				  width: 50%;
				}
				
				a[href*="intent"] {
				  display: inline-block;
				  margin-top: 0.4em;
				}
				
				
				/*  
						 * Rating styles
						 */
				
				.rating {
				  width: 226px;
				  margin: 0 auto 1em;
				  font-size: 45px;
				  overflow: hidden;
				}
				
				.rating input {
				  float: right;
				  opacity: 0;
				  position: absolute;
				}
				
				.rating a,
				.rating label {
				  float: right;
				  color: #aaa;
				  text-decoration: none;
				  -webkit-transition: color .4s;
				  -moz-transition: color .4s;
				  -o-transition: color .4s;
				  transition: color .4s;
				}
				
				.rating label:hover ~ label,
				.rating input:focus ~ label,
				.rating label:hover,
				.rating a:hover,
				.rating a:hover ~ a,
				.rating a:focus,
				.rating a:focus ~ a {
				  color: orange;
				  cursor: pointer;
				}
				
				.rating2 {
				  direction: rtl;
				}
				
				.rating2 a {
				  float: none
				}
				
				/*http://iconfont.cn*/
				@font-face {
				  font-family: 'iconfont';  /* project id 739870 */
				  src: url('//at.alicdn.com/t/font_739870_6w2k0r1jaji.eot');
				  src: url('//at.alicdn.com/t/font_739870_6w2k0r1jaji.eot?#iefix') format('embedded-opentype'),
				  url('//at.alicdn.com/t/font_739870_6w2k0r1jaji.woff') format('woff'),
				  url('//at.alicdn.com/t/font_739870_6w2k0r1jaji.ttf') format('truetype'),
				  url('//at.alicdn.com/t/font_739870_6w2k0r1jaji.svg#iconfont') format('svg');
				}
				.iconfont{
				    font-family:"iconfont" !important;
				    font-size:16px;font-style:normal;
				    -webkit-font-smoothing: antialiased;
				    -webkit-text-stroke-width: 0.2px;
				    -moz-osx-font-smoothing: grayscale;
			    }
		</style>
	</head>
	<body>
		
		
<div class="rating">
  <!--
  --><input name="stars" id="e5" type="radio"></a><label for="e5">☆</label>
  <!--
		--><input name="stars" id="e4" type="radio"></a><label for="e4">☆</label>
  <!--
		--><input name="stars" id="e3" type="radio"></a><label for="e3">☆</label>
  <!--
		--><input name="stars" id="e2" type="radio"></a><label for="e2">☆</label>
  <!--
		--><input name="stars" id="e1" type="radio"></a><label for="e1">☆</label>
</div>

<div class="rating rating2">
		<a href="#5" title="Give 5 stars">★</a>
  <!--
		--><a href="#4" title="Give 4 stars">★</a>
  <!--
		--><a href="#3" title="Give 3 stars">★</a>
  <!--
		--><a href="#2" title="Give 2 stars">★</a>
  <!--
		--><a href="#1" title="Give 1 stars">★</a>
</div>


<div class="rating rating2">
		<a href="#5" title="Give 5 stars" class="iconfont icon-shiwujiaoxing"></a>
  <!--
		--><a href="#4" title="Give 4 stars" class="iconfont icon-shiwujiaoxing"></a>
  <!--
		--><a href="#3" title="Give 3 stars" class="iconfont icon-shiwujiaoxing"></a>
  <!--
		--><a href="#2" title="Give 2 stars" class="iconfont icon-shiwujiaoxing"></a>
  <!--
		--><a href="#1" title="Give 1 stars" class="iconfont icon-shiwujiaoxing"></a>
</div>


<div class="rating rating2">
		<a href="#5" title="Give 5 stars" class="iconfont"></a>
  <!--
		--><a href="#4" title="Give 4 stars" class="iconfont"></a>
  <!--
		--><a href="#3" title="Give 3 stars" class="iconfont"></a>
  <!--
		--><a href="#2" title="Give 2 stars" class="iconfont"></a>
  <!--
		--><a href="#1" title="Give 1 stars" class="iconfont"></a>
</div>



	</body>
</html>

smartwange

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五星评价

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--http://iconfont.cn--&gt; &lt;link rel="stylesheet" type
复制链接

扫一扫

专栏目录