作者:盧品澄_673 | 来源:互联网 | 2023-08-27 19:38
订货会项目从基础的开始讲清除浮动11111111111111122222222222222222211111111111111122222222222222222211111111
订货会项目
主要学习到的东西的一个总结
从基础的开始讲
清除浮动
问题描述,浮动的元素导致高度塌陷,接下来的margin虽然起作用了,但是还是紧靠顶端;
//在浮动的元素丽添加一个空元素,设置
//这种不推荐使用
//方法一
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星评分功能实现
2016工作项目完成总结