HTML+CSS实现五角星评分效果

谁践踏了优雅 2022-01-22 06:15 1181阅读 0赞

### 文章目录 ###

*  1.效果：
 *  2.HTML
 *  3.CSS
 *  4.图片
 *  5.另一种样式

# 1.效果： #

![在这里插入图片描述][20190605133418839.gif]

技术栈 H5+CSS3+JQ+Bootstrap

# 2.HTML #

# 3.CSS #

> star-main.css 已经过压缩，可在  
> [http://tool.chinaz.com/Tools/CssFormat.aspx][http_tool.chinaz.com_Tools_CssFormat.aspx] 进行代码格式化

ul,li{ list-style:none}a{ text-decoration:none;color:#666}a:hover{ text-decoration:none}.icon{ width:30px;height:30px}.hover{ background:#0f6c8d}.clickMask{ position:absolute;left:0;top:0;right:-1px;bottom:0;z-index:999;display:none}.alarm{ position:fixed;top:240px;margin-left:627px;font-size:26px;color:#f90}.clearFix:after{ content:'';display:block;clear:both}i{ font-style:normal}#active{ font-size:12px;color:#289cd5;font-weight:700}.course_main{ width:100%;height:100%}.top{ width:100%;height:90px;background:#fff;color:#000}.top_nr{ width:1200px;margin:0 auto}.top_left{ height:90px;float:left}.top_left i{ width:180px;height:90px;display:block;float:left;background:../images/student/logo.png) no-repeat center;}.top_left h1{ line-height:100px;display:block;float:left;font-size:28px;}.top_right{ height:90px;float:right;line-height:90px;padding-right:10px;}.top_right a{ padding:0 10px;color:#000;font-size:14px;display:block;float:left;}.top_right a span{ padding-right:5px;display:block;float:left;}.top_right a i{ color:#f00;padding:0 5px;display:block;float:left;}.top_right a b{ display:block;float:left;}.top_right a img{ margin-top:30px;display:block;float:left;}.nav{ width:100%;height:50px;background:#389fc3;margin-top:15px;}.nav_nr{ width:1200px;height:50px;line-height:50px;margin:0 auto;font-size:14px;}.nav_nr ul{ display:block;margin:0;}.nav_nr ul li{ height:50px;display:block;float:left;}.nav_nr ul li a{ color:#fff;display:block;height:50px;float:left;padding:0 20px;}.nav_nr ul li a:hover{ text-decoration:none;}.nav_nr i{ color:#fff;display:block;float:left;}.fy{ width:100%;height:50px;margin-left:15px;margin-top:10px;float:left;}.easyPieChart{ position:relative;text-align:center;}.easyPieChart canvas{ position:absolute;top:0;left:0;}.foot{ width:100%;height:50px;clear:both;}.test_main{ width:1320px;margin:15px auto 0;overflow:hidden;}.nr_nav{ width:120px;height:1px;float:left;}.nr_nav1{ width:120px;position:fixed;top:16px;z-index:1000;overflow:hidden;}.ceping_title{ height:45px;line-height:45px;font-size:16px;font-weight:bold;background-color:#FFF;text-align:left;}.ceping_students{ text-align:left;line-height:30px;}.ceping_students span{ display:block;border-top:1px solid #F5F5F5;}.nr_left{ width:900px;height:100%;float:left;position:relative;}.test{ width:100%;border:1px solid #e4e4e4;text-align:left;float:left;}.test_title{ width:900px;height:45px;line-height:45px;background-color:#f7f7f7;position:fixed;bottom:0;z-index:1000;}.title_icon{ float:left;height:45px!important;}.first_title{ float:left;}.test_title p{ padding:0 20px;display:block;float:left;}.test_time{ color:#389FC3;line-height:45px;}.test_time i{ font-size:20px;height:45px;line-height:40px;display:block;float:left}.test_time b{ font-size:16px;height:45px;display:block;margin-left:10px;}.test_dtk{ line-height:45px;}.test_dtk i{ font-size:22px;height:45px;line-height:45px;display:block;float:left;color:#389fc3;}.test_dtk span{ font-size:14px;height:45px;display:block;float:left;margin-left:10px;}.test_title font{ width:80px;height:45px;display:block;float:right;text-align:center;}.test_title font a{ background:#389fc3;border:none;display:block;width:80px;height:45px;cursor:pointer;color:#fff;font-size:16px;font-weight:bold;}.test_title font a:active{ background:#79aef0;}.test_content_title{ background:#F2F6F9;height:45px;line-height:45px;font-size:16px;font-family:é»‘ä½“;}.test_content{ width:100%;height:auto;}.test_content_title h2{ padding:0 30px;font-size:16px;font-weight:normal;display:block;float:left;}.test_content_title p{ padding:0 10px;height:40px;line-height:40px;background:#389fc3;color:#fff;border-radius:30px;display:block;float:left;margin-top:5px;margin-left:18px;}.test_second_title{ padding:0 30px;font-size:16px;font-weight:normal;display:block;height:45px;line-height:45px;border-bottom:1px solid #f1efef;color:#389Fc3;}.test_content_nr{ width:100%;}.test_content_nr>ul>li{ width:100%;border-bottom:5px solid #efefef;padding-top:10px;}.test_content_nr_tt{ width:85%;height:auto;line-height:32px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.test_content_nr_tt i{ width:25px;height:25px;line-height:25px;text-align:center;display:block;float:left;background:#5d9cec;border-radius:50%;margin-left:-50px;color:#fff;margin-top:8px;font-size:16px;}.test_content_nr_tt span{ padding:0 8px;}.test_content_nr_tt font{ font-size:14px}.test_content_nr_tt b{ display:block;float:right;margin-right:-50px;color:#f48c27;font-size:20px;}.test_content_nr_main{ width:85%;margin:0 auto;padding:10px 0;height:auto;}.option{ line-height:32px;display:block;background:#fff;color:#666;}.option:hover{ background:#e4e4e4;}.option input{ width:20px;height:20px;display:block;float:left;margin:7px 10px 0 0;}.option label{ height:auto;display:block;}.test_more_nr_main{ width:85%;margin:0 auto;padding:10px 0;}.multiple{ width:100%;height:40px;line-height:40px;display:block;background:#fff;margin-bottom:3px;}.multiple:hover{ background:#e4e4e4;}.multiple dd input{ width:20px;height:20px;display:block;float:left;margin:10px 10px 0 0;}.multiple dd label{ width:725px;height:40px;display:block;float:left;}.test_click{ background:#7aaff3;}.test_click a{ color:#fff;}.nr_right{ width:280px;height:100%;float:right;}.nr_rt_main{ width:100%;height:auto;}.rt_nr1{ width:280px;position:fixed;top:15px;z-index:1000;}.rt_nr1_title{ width:280px;height:45px;line-height:45px;background:#f3f3f3;}.rt_nr1_title h1{ width:50%;height:45px;background:#389fc3;text-align:center;font-size:14px;display:block;float:left;color:#fff;}.rt_nr1_title h1 i{ padding:0 5px;font-size:14px;font-weight:normal;}.rt_nr1_title p{ width:130px;height:43px;padding-right:8px;border:1px solid #e4e4e4;border-left:0;display:block;float:right;}.rt_nr1_title p i{ margin-left:10px;}.rt_content{ width:278px;height:100%;border:1px solid #e4e4e4;border-top:0;}.rt_content_tt{ width:95%;height:40px;line-height:40px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.rt_content_tt h2{ width:100%;font-size:14px;display:inline-block;text-align:left;}.rt_content_tt p{ width:100px;display:inline-block;}.rt_content_tf{ width:95%;height:30px;line-height:30px;margin:0 auto;text-align:left;}.answerSheet ul{ padding:10px;text-align:left;}.answerSheet li{ display:inline-block;margin-bottom:5px;height:30px;width:30px;line-height:30px;text-align:center;border:1px solid #e4e4e4;margin-right:5px;}.answerSheet li a{ display:block;}.answerSheet li:hover{ color:#389fc3;border-color:#389fc3;}.rt_more{ width:278px;height:100%;border:1px solid #e4e4e4;border-top:0;}.rt_more_tt{ width:95%;height:40px;line-height:40px;margin:0 auto;border-bottom:1px solid #e4e4e4;}.rt_more_tt h2{ width:150px;font-size:14px;display:inline-block;}.rt_more_tt p{ width:100px;display:inline-block;}.rt_more_nr ul{ padding:10px;text-align:left;}.rt_more_nr ul li{ display:inline-block;margin:5px;height:30px;width:30px;line-height:30px;text-align:center;border:1px solid #e4e4e4;}.star_content{ margin:5px 0;padding:5px 0;border-top:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;background:#F5F5F5;}.textarea textarea{ width:100%;min-width:100%;max-width:100%;height:80px;border:none;font-size:14px;outline:none;padding:10px 0;}.description{ color:#47cbff;}.hasBeenAnswer{ background:#5d9cec;color:#fff;}.item{ width:150px;height:150px;float:left;position:relative;margin:20px;margin-left:0;}.addImg{ width:150px;height:150px;position:absolute;left:0;top:0;z-index:2;cursor:pointer;}.preview,.preBlock{ position:absolute;display:block;width:150px;height:150px;left:0;top:0;}.delete{ width:30px;position:absolute;right:-30px;top:-15px;cursor:pointer;display:none;}.preBlock img{ display:block;width:150px;height:150px;}.upload_input{ display:block;width:0;height:0;-webkit-opacity:0.0;-moz-opacity:0.0;-khtml-opacity:0.0;opacity:.0;filter:alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}.image_title{ font-size:16px;}.starability-slot{ display:block;position:relative;width:150px;min-height:35px;padding:0;border:none}.starability-slot>input{ position:absolute;margin-right:-100%;opacity:0}.starability-slot>input:checked~label,.starability-slot>input:hover~label{ background-position:0 -30px;transition:background-position .7s}.starability-slot>label{ position:relative;display:inline-block;float:right;width:30px;height:30px;color:transparent;cursor:pointer;background-image:url(../img/icons.png);background-repeat:no-repeat}.starability-title,.starability-container{ float:left;}.starability-title{ height:35px;line-height:35px;margin:0 10px;font-size:16px;}.hide{ display:none;}.show{ display:block;}}

# 4.图片 #

> icons.png

![在这里插入图片描述][20190605133932134.png]  
右键保存，放到img目录下让css读取的到即可!

# 5.另一种样式 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70]

代码：

<!DOCTYPE html>
    
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <title>评价</title>
        <link rel="stylesheet" type="text/css" href="../common/css/bootstrap.min.css">
        <link rel="stylesheet" href="../common/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/star-main.css" media="all" type="text/css"/>
        <script src="../common/js/jquery-1.10.2.js"></script>
    <body>
    <div class="">
    	
    	
        <div class="page-header" style="text-align: center;">
            <h2>开始评价</h2>
        </div>
        <form>
        	
        	<div class="evalBody">
        		
        		<div class="manyidu">
        			 <span style="font-size: 2rem;line-height: 2.9rem;padding: 1rem;" id="starStr">满意度</span>
        			 <div class="panel-body" style="text-align: center; margin-left: 23%;">
    		  	  		  <input name="starNum" id="starNum" type="hidden"/>
                          <div class="starability-container">
    	                       <fieldset class="starability-slot">
    		                        <input type="radio" id="rate_1_0_1_5" name="starLevel" value="5" /> 
    		                        <label for="rate_1_0_1_5" title="5星"></label>
    		                        <input type="radio" id="rate_1_0_1_4" name="starLevel" value="4" /> 
    		                        <label for="rate_1_0_1_4" title="4星"></label>
    		                        <input type="radio" id="rate_1_0_1_3" name="starLevel" value="3" /> 
    		                        <label for="rate_1_0_1_3" title="3星"></label>
    		                        <input type="radio" id="rate_1_0_1_2" name="starLevel" value="2" /> 
    		                        <label for="rate_1_0_1_2" title="2星"></label>
    		                        <input type="radio" id="rate_1_0_1_1" name="starLevel" value="1" /> 
    		                        <label for="rate_1_0_1_1" title="1星"></label>
    	                       </fieldset>
                          </div>
    		  		 </div>
        		</div>
        		
        		
        		
        		<div class="beizu">
    			   	<textarea class="beizu-text" id="customerEvaluationComment" 
    			   		name="customerEvaluationComment"
    			   		placeholder="写点备注吧..."
    	        	class="form-control" rows="16" style=""></textarea>
        		</div>
        		
        		
        		
        		<div class="anniu">
        				<button type="button" class="btn btn-primary btn-lg btn-block" 
        					style="margin-bottom: 0.8rem !important;"
        					onclick="evaluation();">提交
        				</button>
        				
    					<button type="button" class="btn btn-default btn-lg btn-block"  
    						onclick="closed();">关闭</button>
    		    		</div>
        		</div>
    		<div class="evalDe1"></div>
    		<div class="evalDe2"></div>
    		
        </form>
    </div>
    </body>
    <script src="../utils/conmmonConfig.js"></script>
    <script src="../utils/btwsdk.js"></script>
    <script src="../utils/btwApiUtil.js"></script>
    <script>
    	
    	
    	$('[name="starLevel"]').bind("click",function(){ 
    		$("#starNum").val($(this)[0].value)
    		var starNum = $(this)[0].value;
    		if(starNum == 1) $("#starStr").text("差");
    		if(starNum == 2) $("#starStr").text("一般");
    		if(starNum == 3) $("#starStr").text("优");
    		if(starNum == 4) $("#starStr").text("良");
    		if(starNum == 5) $("#starStr").text("满意");
    	})
    	
    	
    	var urlString = window.location.href;
    	//当前会话id
    	var sessionId = urlString.split('?sessionId=')[1];
    	
    	// 提交评论
    	function evaluation() { 
    		//评价等级
    		var customerEvaluationLevel = $('#starNum').val();
    		if (customerEvaluationLevel == undefined || customerEvaluationLevel == null || customerEvaluationLevel == '') { 
    			alert('请将满意度选好再提交哦！');
    			return false;
    		}
    	
    	}
    	
    	//关闭
    	function closed() { 
    		window.close();
    	}
      
    </script>
    
    
    
    <style>
    	
    	
    	body{ 
    		background-color: rgba(246, 246, 246, 0.16) !important;
    	}
    	
    	/*底部效果*/
    	.evalDe1{ 
    		border: 1px solid white;
    	    height: 0.7rem;
    	    width: 70%;
    	    margin: 0 auto;
    	    z-index: -5;
    	    opacity: 0.8;
    	    box-shadow: 0px 0px 7px -2px grey;
    	    background-color: white;
    	}
    	.evalDe2{ 
    		border: 1px solid white;
    	    height: 0.5rem;
    	    width: 60%;
    	    margin: 0 auto;
    	    z-index: -5;
    	    opacity: 0.9;
    	    box-shadow: 0px 0px 30px 3px #e2e2e2;
        	background-color: white;
    	}
    	/*按钮颜色*/
    	.btn-block{ 
    		width: 80% !important;
    		margin: 0 auto !important;
    	}
    	/*满意主体*/
    	.evalBody { 
    	    width: 29rem;
    	    height: 44rem;
    	    border: 1px solid white;
    	    margin: auto;
    	    margin-top: 3rem;
    	    box-shadow: 1px 0px 21px -8px grey;
    	}
    	/*满意度*/
    	.manyidu { 
    	    text-align: center;
    	    font-size: 21px;
    	    margin-top: 3rem;
    	}
    	/*备注文本*/
    	.beizu-text{ 
    		font-size: 1.7rem;
    	    height: 12rem !important;
    	    width: 79%;
    	    border: 1px solid #f0eaea;
    	    box-shadow: 4px 1px 22px -5px #909090;
    	    margin-top: 1rem;
    	    margin-left: 3rem;
    	    margin-bottom: 2rem;
    	    opacity: 0.9;
    	    border-radius: 1rem;
    	    outline: none;
    	    padding: 0.9rem;
    	}
    
    	.page-header{ 
    		padding-bottom: 1px !important;
        	margin: 18px 0 20px !important;
    	}
    	.submit_btn{ 
    		width: 100%;
    	}
    	.textarea.form-control{ 
    		height: 28rem !important;
    	}
    	h3{ 
    		font-size: 22px;
    	}
    	h2{ 
    		font-size: 19px;
    	}
    	.panel-body{ 
    		padding: 8px;
    	}
    </style>
    </html>

[20190605133418839.gif]: /images/20220122/5a60cbb93ba9443282a91a029a5aa6b8.png
[http_tool.chinaz.com_Tools_CssFormat.aspx]: http://tool.chinaz.com/Tools/CssFormat.aspx
[20190605133932134.png]: /images/20220122/d3289c6a16634b5aaf5acb9ea42487c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQxMzE2MTc_size_16_color_FFFFFF_t_70]: /images/20220122/7bf86f5f4163440299e49cd197affee0.png