我在工作中总结的一些前端常用小细节 (转载)
2016-10-20 16:50
423 查看
1、点击聚焦
相信很多人在写form表单的时候能用到。顺带提一下,当我们点击input框时会有出现蓝色边框,我们可以这样来处理
2、ie的透明度兼容
很多人肯定遇到过,我们在做ie透明度兼容的时候,经常会用定位的方法,但是这个不用,有兴趣的可以试试看。
3、修改滚动条样式
滚动条太单一太丑?我们可以这样试试,参数可以修改,当然ie不兼容的。
4、网页素装
有些时候的时候我们需要把网站整体变灰,试试这个样式。
5、返回顶部
以上这些,花点时间百度一下也就能找的到。下面这些是我自己整理的。
6、无缝滚动轮播
这个只是个引导,有兴趣的可以试试修改
7、js 切换样式
8、 一些css3知识点
过渡
9、移动端字体自适应大小
我个人认为这个还是非常有用的,我每次做移动端的东西都会用到,参数可以自行修改。
10、css3自适应上下左右居中
我想很多人会遇到上下居中不能的问题,原理就是把块级元素,转换成table,然后vertical-align: middle;就可以了,我就是这么理解的。
本文原创发布于慕课网 ,转载请注明出处,谢谢合作!
原文链接(特此声明):http://www.imooc.com/article/8997
onfocus="if (value =='请输入您的电话号码'){value =''}" onblur="if (value ==''){value='请输入您的电话号码'}"
相信很多人在写form表单的时候能用到。顺带提一下,当我们点击input框时会有出现蓝色边框,我们可以这样来处理
input{outline:none;}。
2、ie的透明度兼容
background:#000;filter:Alpha(opacity=60); background:rgba(0,0,0,0.6) none repeat scroll !important;
很多人肯定遇到过,我们在做ie透明度兼容的时候,经常会用定位的方法,但是这个不用,有兴趣的可以试试看。
3、修改滚动条样式
.test1::-webkit-scrollbar { width: 6px; } .test1::-webkit-scrollbar-track { background-color:#808080; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } .test1::-webkit-scrollbar-thumb { background-color:#ff4400; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; }
滚动条太单一太丑?我们可以这样试试,参数可以修改,当然ie不兼容的。
4、网页素装
html{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); filter: gray;}
有些时候的时候我们需要把网站整体变灰,试试这个样式。
5、返回顶部
function pageScroll(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-80); //延时递归调用,模拟滚动向上效果速度 scrolldelay = setTimeout('pageScroll()',10); /*获取scrollTop值,声明了DTD的标准网页取 document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值*/ var sTop=document.documentElement.scrollTop+document.body.scrollTop; //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面) if(sTop==0) clearTimeout(scrolldelay); }
以上这些,花点时间百度一下也就能找的到。下面这些是我自己整理的。
6、无缝滚动轮播
function gqban(){ left+ = 1; //每次移动的像素 if(left>=width){ left=0; $('.dbdoc ul').css("left",left).find("li:first").appendTo($(".dbdoc ul")); }else{ $(".dbdoc ul").css({left:-left+"px"}); } }
这个只是个引导,有兴趣的可以试试修改
7、js 切换样式
var list_txt=document.querySelectorAll(".artlist_wrap ol li"); for(var i=0;i<list_txt.length;i++){ (function(){ var db_index=i; list_txt[db_index].onclick=function(){ for(var i=0;i<list_txt.length;i++){ list_txt[i].className=""; } this.className="active"; } })() }
8、 一些css3知识点
过渡
transition:属性 时间 曲线 延迟时间; transition:width 1s linear 2s; transform: 2D translate(0px,0px) (位置移动) rotate(30deg) (旋转) scale(2,4) (宽度2倍,高度4倍) skew(30deg,20deg) (X轴30度,Y轴20度) matrix() (无视) 3D rotateX(180deg) (上下3D旋转) rotateY(180deg) (左右3D旋转) transform-origin:(left,top)(改变轴心)
9、移动端字体自适应大小
body{font-family: "Microsoft YaHei";font-size: 0.14rem;color: #666;max-width: 640px;margin: auto;} @media screen and (min-width: 360px) { html {font-size: 710%;} } @media screen and (min-width: 414px) { html {font-size: 825%;} } @media screen and (min-width: 600px) { html {font-size: 1095%;} }
我个人认为这个还是非常有用的,我每次做移动端的东西都会用到,参数可以自行修改。
10、css3自适应上下左右居中
.aboutlist_wrap ul li a{display:table; } .aboutlist_wrap ul li a p{display: table-cell;text-align: center;} .aboutlist_wrap ul li a p{vertical-align: middle;}
我想很多人会遇到上下居中不能的问题,原理就是把块级元素,转换成table,然后vertical-align: middle;就可以了,我就是这么理解的。
我们在平时工作中,还会遇到很多效果,这里就整理这么多了,希望对大家有用,大家共勉,学无止境。
本文原创发布于慕课网 ,转载请注明出处,谢谢合作!
原文链接(特此声明):http://www.imooc.com/article/8997
相关文章推荐
- 前端开发中一些常用技巧总结
- 关于过去工作的一些总结:常用sql语句以及数据库查询优化
- 总结一下我工作中常用到的一些linux命令
- WEB前端开发中一些常用技巧总结
- SNMP监控一些常用OID的总结(转载)
- 前端乱炖,总结一些细节点
- 前端开发中一些常用技巧总结
- 转载别人的总结:android一些常用代码和方法
- 【工作积累】前端开发的一些总结
- 总结了一些web前端常用的cdn
- 前端开发常用校验(转载总结)
- 前端开发中一些常用技巧总结
- 前端开发中一些常用技巧总结
- 前端开发中一些常用技巧总结
- 总结了一些常用的比较细节CSS和HTML代码的用法
- 总结C#中得到程序当前工作目录和执行目录的一些方法
- 一些精简的tuning总结(转载)
- ActiveReports工作总结7——常用一览表印刷
- 工作之余,整理了一下平时处理数据的一些常用的,简单的方法。希望对学习JAVA的朋友有点帮助
- 转载高手的 ASP.NET中常用功能代码总结 文件操作篇