一個漂亮的移動端評價頁面

阿新 • • 發佈：2019-01-12

效果圖:

這個水印影響效果了。

原始碼下載:一個漂亮的移動端評價頁面

檔案結構圖:

HTML程式碼:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>評價</title>
		<link rel="stylesheet" href="css/new_file.css" type="text/css"/>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
	</head>
	
	<body>
		<!--頭部  star-->
		<header>
			<a href="javascript:history.go(-1);">
				<div class="_left"><img src="images/left.png"></div>
				   評價
			</a>
		</header>
		<!--頭部 end-->
        <!--內容 star-->
		<div class="contaniner fixed-cont">
			<!--1-->
			<section class="assess">
				<p>
					<textarea rows="7" placeholder="請寫下對商品的感受吧，對我們幫助很大哦～～blog.wybing.com"></textarea>
				</p>
				<ul>
					<li>評價</li>
					<li class="assess-right">
						<div><input type="radio" name="radio" value="radio1"/><img src="images/hua.png"/></div>
						<div><input type="radio" name="radio" value="radio2"/><img src="images/huah.png"/></div>
						<div><input type="radio" name="radio" value="radio3"/><img src="images/huae.png"</div>
					</li>
				</ul>
			</section>
			<!--2-->
			<section class="main">
			<div class="main-wrap">
				<span class="revtit">綜合評分:</span>
				<div id="mydiv1" currentIndex="0" class="mydiv">
	    			<ul class="star_ul">
				        <li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
				        <li num="2"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="3"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="4"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="5"><img src="images/star_empty.png"  class="xing_hui"/></li>
			   		</ul>
				</div>
			</div>
			
			<div class="main-wrap">
				<span class="revtit">基本素質:</span>
				<div id="mydiv2" currentIndex="0" class="mydiv">
	    			<ul class="star_ul">
				        <li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
				        <li num="2"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="3"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="4"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="5"><img src="images/star_empty.png"  class="xing_hui"/></li>
			   		</ul>
				</div>
			</div>
		
			<div class="main-wrap">
				<span class="revtit">儀容著裝:</span>
				<div id="mydiv3" currentIndex="0" class="mydiv">
	    			<ul class="star_ul">
				        <li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
				        <li num="2"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="3"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="4"><img src="images/star_empty.png"  class="xing_hui"/></li>
				        <li num="5"><img src="images/star_empty.png"  class="xing_hui"/></li>
			   		</ul>
				</div>
			</div>
	</section>
		</div>
		<!--內容 end-->
        
        <!--底部 star-->
		<footer class="assess-footer fixed-footer ">
			<ul>
				<li>
					<input type="checkbox" id="ass" />
					<label for="ass" onselectstart="return false">匿名評價</label>
				</li>
				<input type="button" value="發表評論" />
			</ul>
		</footer>
       <!--底部  end-->
		<script type="text/javascript">
				$(".assess-footer ul li label").on('touchstart',function(){
			if($(this).hasClass('assd')){
				$(".assess-footer ul li label").removeClass("assd")
			}else{
				$(".assess-footer ul li label").addClass("assd")
			};
		});
			
//匿名評價
        var isclick = false;
        function change(mydivid,num) {
            if (!isclick) {
                var tds = $("#"+mydivid+" ul li");
                for (var i = 0; i < num; i++) {
                    var td = tds[i];
                    $(td).find("img").attr("src","images\/star_full.png");
                }
                var tindex = $("#"+mydivid).attr("currentIndex");
                tindex = tindex==0?0:tindex+1;
                for (var j = num; j < tindex; j++) {
                    var td = tds[j];
                    $(td).find("img").attr("src","images\/star_empty.png");
                }
                $("#"+mydivid).attr("currentIndex",num);
            }
        }
        function repeal(mydivid,num) {
            if (!isclick) {
                var tds = $("#"+mydivid+" ul li");
                var tindex = $("#"+mydivid).attr("currentIndex");
                tindex = tindex==0?0:tindex+1;
                for (var i = tindex; i < num; i++) {
                    var td = tds[i];
                    $(td).find("img").attr("src","images\/star_empty.png");
                }
                $("#"+mydivid).attr("currentIndex",num);
            }
        }
        function change1(mydivid,num) {
            if (!isclick) {
                change(mydivid,num);

            }
            else {
                alert("Sorry,You had clicked me!");
            }
        }
        $(function(){
            initEvent('mydiv1');
            initEvent('mydiv2');
            initEvent('mydiv3');
        });
        function initEvent(mydivid) {
            var tds = $("#"+mydivid+" ul li");
            for (var i = 0; i < tds.length; i++) {
                var td = tds[i];
                $(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});
                $(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});
            }
        }

		</script>
	</body>

</html>

jquery 1.9+ 以後移除了live方法，以後的版本請使用on方法代替。

$(td).on('mouseover',function() {
                  var num = $(this).attr("num");change(mydivid,num);
                });
                $(td).on('click',function() {
                  var num = $(this).attr("num");change1(mydivid,num);
                });

CSS程式碼:

html {
	font-size: 125%; /* 20梅16=125% min-font-size:12px bug*/
}
@media only screen and (min-width: 481px) {
html {
	font-size: 188%!important; /* 30.08梅16=188% */
}
}
@media only screen and (min-width: 561px) {
html {
	font-size: 218%!important; /* 38.88梅16=218% */
}
}
@media only screen and (min-width: 641px) {
html {
	font-size: 250%!important; /* 40梅16=250% */
}
}
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font: inherit;
	vertical-align: baseline;
	font-family: "Microsoft YaHei"
}
body {
	font-family: "Microsoft YaHei";
	font-size: 0.7rem;
	color: #333;
	line-height: 0.7rem;
	width: 100%;
	background: #f2f2f2;
}
em {
	font-style: normal
}
li {
	list-style: none
}
a {
	text-decoration: none;
	outline: 0;
	color: #333;
}
img {
	border: none;
	vertical-align: top;
}
table {
	border-collapse: collapse;
}
input, textarea {
	font-family: "Microsoft YaHei";
	padding: 0;
}
textarea {
	resize: none;
	overflow: auto;
}
textarea:focus {
	outline: none;
}
input:focus {
	outline: none;
}
.clear {
	zoom: 1
}
.clear:after {
	content: "";
	display: block;
	clear: both;
}
.fl {
	float: left
}
.fr {
	float: right
}
/*************************************頁面開始************************************/
header{
	background: #FFFFFF;
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 97;
}
header a{
	color: ##333333;
}
header ._left {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
header ._left img {
    height: 1rem;
    margin: 0.75rem 0 0 0.6rem;
}

.contaniner {
    width: 100%;
    overflow: hidden;
}
.fixed-cont {
    margin-top: 15%;
    margin-bottom: 20%;
}

.assess {
    width: 100%;
}
.assess p {
    width: 92%;
    padding: 4%;
    overflow: hidden;
    background-color: #fff;
}
.assess p textarea {
    float: right;
    text-align: justify;
    width: 100%;
    border: none;
    font-size: 0.9em;
    color: #666;
}
.assess ul {
    width: 90%;
    padding: 2% 5%;
    background-color: #fff;
    overflow: hidden;
    margin-top: 3%;
}
.assess ul li {
    float: left;
    font-size: 0.9em;
    color: #666;
}
.assess ul .assess-right {
    float: right;
    width: 40%;
    overflow: hidden;
}
.assess-right div{
	width: 32%;
	float: left;
    text-align: center;
    display: flex;
}

.assess-footer {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
}
.assess-footer li {
    position: relative;
    float: left;
    width: 70%;
    padding: 3% 0;
}
.assess-footer li input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    top: 40%;
    left: 0;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 3px;
}
.assess-footer li label {
    width: 80%;
    padding-left: 20%;
    font-size: 0.9em;
    color: #666;
    display: block;
    background: url(../images/check.png) no-repeat;
    background-size: 6%;
    background-position: 10%;
    -moz-user-select: none;
}
.assess-footer li .assd{ 
	width: 80%; 
	padding-left: 20%; 
	font-size: 0.9em; 
	color: #666;  
	display: block; 
	background: url(../images/checke.png) no-repeat;
	background-size: 6%; 
	background-position: 10% 
}
.assess-footer input[type="button"] {
    float: right;
    width: 30%;
    padding: 3% 0;
    text-align: center;
    color: #fff;
    background-color: #ff0082;
    border: none;
    font-size: 0.9em;
}

.main {
    width: 100%;
    margin: 0.2rem auto;
    background: #FFFFFF;
}
.main span {
    line-height: 1.5rem;
}
.main-wrap{
	padding: 0.1rem 0 0.1rem 0.5rem;
}
 .mydiv {
    display: inline-block;
}
.main ul {
    list-style-type: none;
    overflow: hidden;
}
.star_ul li {
    margin-right: 0.3rem;
    float: left;
}
.star_ul img {
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: text-bottom;
}

一個漂亮的移動端評價頁面

原始碼下載:一個漂亮的移動端評價頁面效果圖: 這個水印影響效果了。原始碼下載:一個漂亮的移動端評價頁面檔案結構圖: HTML程式碼: <!DOCTYPE html> <html> <head> <m

傾力總結40條常見的移動端Web頁面問題解決方案

web dropdown 文本 ie瀏覽器 -c cti nbsp name oct 1、安卓瀏覽器看背景圖片，有些設備會模糊。用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麽呢？經過研究，是devicePixelRatio作怪，因為手機分辨率太小

移動端h5頁面常見問題總結

webkit style 總結 mar 常見問題就會所有真的 abs 　　從去年開始在公司一直做嵌入式的h5頁面，遇見了很多問題，做一個小小的總結~ 　　1.IOS設備鏈接、按鈕等點擊產生灰色背景　　在傲嬌的iOS中可點擊元素被點擊時候會出現覆蓋顯示的高亮顏色，也就

基於jQuery的 h5移動端抽獎頁面插件

舉例背景 active fun device none this 模板循環基於jQuery的 H5移動端頁面抽獎插件 12宮格抽獎頁面采用rem布局，親測安卓機有效，用的是375px設計稿同時可以學習下jQuery插件的基本模板是怎麽寫的。案例下載地址：gith

移動端web頁面input限制只能輸入數字

字段數字 arp 設置輸入 inpu highlight ios端 web頁面 <input type="number" pattern="[0-9]*" /> 如上所示，在安卓端設置input類型為number，可限制鍵盤只輸入數字，在ios端，要

移動端web頁面滾動不流暢，卡頓閃爍解決方案

方案代碼 osi col 實現移動端 ios端出現問題： 1.ios端的-webkit-overflow-scrolling屬性可控制頁面滾動效果，設置如下實現慣性滾動和彈性效果： -webkit-overflow-scrolling: touch 2.posi

移動端web頁面開發常用的頭部標簽設置

-h 方法 sca style 縮小 ipad edge 數字識別 ios 在移動端web頁面開發中，我們常需要設置各種頭部標簽以幫助瀏覽器更好的解析頁面，將頁面完美呈現，這裏列出了工作中常用的各種頭部標簽，以備查詢。 viewport <meta name=&quo

JS判斷設備類型跳轉至PC端或移動端相應頁面

javascript移動端禁止頁面滑動的解決方案

lse ipad str oid 發現 hid 滾動條 touch roi 1 前言移動端網頁，發現ios平臺的iphone或者ipad，網頁可以上下左右移動，而Android版則不會。僅作為記錄使用。 2 代碼 var mo=function(e){e.prevent

移動端html5頁面長按實現高亮全選文字內容的相容解決方案

最近需要給html5的WebAPP在頁面上實現一個複製功能：使用者點選長按文字會全選文字並彈出系統“複製”選單，使用者可以點選“複製”進行復制操作，然後貼上到AppStore搜尋對應的應用。之所以不是採用連結形式直接跳轉到AppStore對應應用是為了通過使用者的主動輸入關鍵詞搜尋給推廣的企業App

chrome瀏覽器遠端除錯移動端Web頁面

1.Android系統的移動裝置　　a.開啟 USB除錯模式；具體設定請自行百度；　　b.用USB資料線連線手機裝置，並同意這臺計算機進行USB除錯；　　c.在瀏覽器位址列輸入chrome://inspect 或者about:inspec；可以顯示出裝置的名稱，在下圖中

移動端web頁面底部固定元素（軟鍵盤彈出）解決方案

底部固定的輸入框，如圖：解決方案如下 <div> <Header/> // absolute, top:0 <Footer/> // absolute, bottom:0 <Content/> // absolute

40條常見的移動端Web頁面問題解決方案

1、安卓瀏覽器看背景圖片，有些裝置會模糊。用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，

移動端web頁面文字框+fixed

還是保留之前的態度，依然不推薦在 Android下使用 iScroll。在開發專案時，可以考慮分為兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。移動端業務開發，iOS 下經常會有 fixed 元素和輸入框(input 元

vue移動端5頁面根據螢幕適配的四種方案

最近做了兩個關於h5頁面對接公眾號的專案，不得不提開啟微信瀏覽器內建地圖導航的功能確實有點噁心。下次想起來了的話，進行總結分享一下如何處理。在vue移動端h5頁面當中，其中適配是經常會遇到的問題，這塊主要有兩個方法可以適用。方法一：引入淘寶開源的可伸縮佈局方案淘寶的其實也和viewport的有點像

移動端H5頁面返回並且重新整理頁面（BFcache）

專案中的需求：點選瀏覽器中的返回按鈕，要讓頁面重新載入資源。因為這部分的資源每次去載入的內容都不一樣，如果返回的時候，還是看到原先的內容，那做這個內容塊的意義就很小了；而如果使用者看完了這部分內容，再返回來的時候，這個地方換成了新的內容，這樣就能體現這部分的價值了。而對於瀏覽器來說，大部分瀏覽器的返回是直接

vue 移動端，頁面左右頁面切換效果（切換過程中會出現白屏效果，布吉島怎麼優化，後來就釋出前就棄用了）

<transition name="left"> <router-view v-if="getCms" class="Router"/> </transition> data() { names: 'left' } watch: { '$route'(to,

vue 移動端，頁面左右頁面切換效果（切換過程中會出現白屏效果，布吉島怎麽優化，後來就發布前就棄用了）

names out name watch bsp etc () nsf his <transition name="left"> <router-view v-if="getCms" class="Router"/> </transition

移動端Web頁面適配方案

移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。手機裝置螢幕尺寸不一，做移動端的Web頁面，需要考慮在安卓/IOS的各種尺寸裝置上的相容，這裡總結的是針對移動端裝置的頁面，設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。適配的目標引用一文章的描述：在不同尺寸的手機裝置

移動端h5頁面不同尺寸螢幕適配相容方法

最近剛開始做移動端頁面，遇到了不少bug，說一下解決移動端不同螢幕頁面的適應問題。 1. viewport屬性及html頁面結構 <meta name="viewport" content=

一個漂亮的移動端評價頁面

原始碼下載:一個漂亮的移動端評價頁面

相關推薦