2016工作项目完成总结

订货会项目

主要学习到的东西的一个总结

从基础的开始讲

清除浮动

问题描述，浮动的元素导致高度塌陷，接下来的margin虽然起作用了，但是还是紧靠顶端;

//在浮动的元素丽添加一个空元素，设置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由于键盘的弹出而失效的问题

可见下面的解决方案

提交

功能效果的实现的总结

5星评分功能实现

<div id="star">
<img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" />
<img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" />
<img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" />
<img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" />
<img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" />
</div>
<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 || iStar
for(var i = 0; i <imgs.length; i++) {
if(i<iScore) {
imgs[i].setAttribute('src','http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1eMt9XclyXXXXXXXX-19-19.png')
}else{
imgs[i].setAttribute('src','http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png')
}
}
}
}
</script />

<div id="star"> <img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" /> <img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" /> <img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" /> <img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" /> <img src="http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png" alt="" /> </div> <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 || iStar for(var i = 0; i <imgs.length; i++) { if(i<iScore) { imgs[i].setAttribute('src','http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1eMt9XclyXXXXXXXX-19-19.png') }else{ imgs[i].setAttribute('src','http://images.cnblogs.com/cnblogs_com/heyinwangchuan/928987/o_T1j_SkXl0fXXXXXXXX-19-19.png') } } } } </script /> 运行