订货会项目

从基础的开始讲

清除浮动

//在浮动的元素丽添加一个空元素，设置style="clear:both"//这种不推荐使用//方法一
111111111111111
222222222222222222
111111111111111111111111111
//方法二//在浮动元素的父元素添加overflow：hidden;后者overflow:auto;//这种方法当存在超出父元素的子元素会看不见（如使用position:absolute的元素）
111111111111111
222222222222222222
111111111111111111111111111
//方法三//使用方法一的原理，清除父元素的伪元素的浮动//3(1).clearfix:after{content:".";visibility:hidden;display:block;height:0;clear:coth;}.clearfix{zoom:1;}//3(2).clearfix:after{content:"";display:table;clear:both;};//3(3).clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}

移动端的用户体验

问题描述:在ipad端使用时，没有点击的效果

问题解决:button，在ipad都是有点击的效果的；可以在该点击元素添加-webkit-tap-highlight-color: rgba(240,240,240,0.7);则可改变元素被点击时背景框的颜色。如果需要背景框不显示，则可以将rgba中的alpha值设为0即可，例如-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */

ipad端点击body时不起作用

//使用cursor:pointer;会带来整个页面的点击效果，所以去除-webkit-tao-highlight-color的颜色body{cursor:pointer;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}

fixed由于键盘的弹出而失效的问题

可见下面的解决方案

<style>header, footer, main{display: block;}header{position: fixed;height:50px;left:0;right:0;top:0;}footer{position: fixed;height:34px;left:0;right:0;bottom:0;}main{/* main绝对定位，进行内部滚动 */position: absolute;top:50px;bottom:34px;/* 使之可以滚动 */overflow-y: scroll;-webkit-overflow-scrolling: touch;}main.content{height:2000px;}</style>

功能效果的实现的总结

5星评分功能实现

<script>window.onload = function() {var oStar = document.getElementById("star");var imgs = oStar.getElementsByTagName("img");var iScore = iStar = 0;for(var i = 0; i < imgs.length; i++) {imgs[i].index = i + 1////保证当前数字从从1开始，实际位置为0（因为是数组）imgs[i].onmouseover = function() {showStar(this.index);};//当鼠标离开后，那么当前调用函数无参数，选择默认样式imgs[i].onmouseout = function() {showStar();};// 单击时，用全局变量暂存对应的数字，这样下一次滑动，// 单击的数字颜色就会改变imgs[i].onclick = function() {iStar=this.index;showStar()}}//这里主要控制星星的变色问题，如果参数为真值，那么就选择带有颜色的样式，否则反之function showStar(_index) {//因为isStar始终为零，所以或运算结果为左边的数字var html="";iScore = _index || iStarfor(var i = 0; i 

2016工作项目完成总结