课程咨询 :0551-64632511 QQ:2146233496

保险公司承保达内学员学习效果

  • web前端开发的几个小细节

    发布:合肥web培训      来源:达内新闻      时间:2016-06-15

  • 合肥达内web培训专家总结一些常用的web前端效果代码,相信会有一定帮助的。

    1、点击聚焦

    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;就可以了

上一篇:web前端小知识之CSS布局模型

下一篇:web前端应用的10种常见技术

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:5-31

WEB零基础周末班

WEB零基础周末班

开班日期:5-31

WEB前端业余班

WEB前端业余班

开班日期:5-31

WEB前端就业班

WEB前端就业班

开班日期:5-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56