一个漂亮的移动端评价页面

源代码下载:一个漂亮的移动端评价页面

效果图:

这个水印影响效果了。

源代码下载:一个漂亮的移动端评价页面

文件结构图:

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="data: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="data:images/hua.png"/></div><div><input type="radio" name="radio" value="radio2"/><img src="data:images/huah.png"/></div><div><input type="radio" name="radio" value="radio3"/><img src="data: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="data:images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="3"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="4"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="5"><img src="data: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="data:images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="3"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="4"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="5"><img src="data: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="data:images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="3"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="4"><img src="data:images/star_empty.png"  class="xing_hui"/></li><li num="5"><img src="data: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和CSS实现一个漂亮的个人博客页面！
文章目录网站结构社交网站个人信息页面实现代码 html CSS代码图片包网站结构社交网站的个人信息页面主要由div.element嵌套三个<div>标签构成了页面的三个模块. ...
只用html css网页,用HTML和CSS实现一个漂亮的个人博客页面！
/*第7单元项目7-2 社交网站个人信息页面 CSS文件*/ *{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-a ...
用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
一个漂亮的输出MySql数据库表结构的PHP页面
经常为了方便和直观,我们会首先直接在数据库中设计出表,但是接下来又要将表的结构和设计编写在设计文档中,以便编码的时候可以直观的查询,一旦数据库表非常多,字段非常多的时候,这无疑是件非常郁闷的工作. 这 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
如何打开一个嵌在PC端应用的web窗口的控制台？
这里写自定义目录标题如何打开一个嵌在PC端应用的web窗口的控制台? 新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适 ...
移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法...
1.移动端上拉加载网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
如何在自己的信息管理系统里集成第三方权限控制组件 - 设计一个漂亮的WEB界面...
我们大家都梦想有个完美的各种信息管理系统,其实一个人又会数据库,又会C#.NET程序,还要精通HTML,还要精通CSS,更要精通JS,还有精力去写很多东西,又要调试前台又要调试后台,而且每开发一个系统 ...

一个漂亮的移动端评价页面

源代码下载:一个漂亮的移动端评价页面

一个漂亮的移动端评价页面相关推荐

最新文章

热门文章