zoukankan      html  css  js  c++  java
  • 记录下最近写前端的一些小技巧

    纯CSS实现鼠标指向文字上下滑动

    HTML代码
    <span data-title="首页">首页</span>
    
    CSS代码
    span{position:relative;display:inline-block;transition:all ease-out .3s}
    span:after{position:absolute;left:0;100%;color:#00C0FF;content:attr(data-title);transform:translateY(100%)}

    透明背景png8图片格式消除锯齿神器

    PNGOUT:使用方法,photoshop储存png24格式,然后使用PNGOUT导入转换png8格式

    常用到的css片段

    li:nth-child(3n){margin:0}   li的个数*3的样式
    查看更多属性:http://www.w3school.com.cn/cssref/selector_nth-of-type.asp

    margin-left:calc(100% - 60% - 20px);  根据浏览器宽度计算偏移量
    rgba(0,0,0,.5)  透明度颜色


    设置input、textarea下placeholder预览文字颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: rgba(255,255,255,.5)}
    input:-moz-placeholder, textarea:-moz-placeholder{color: rgba(255,255,255,.5)}
    input::-moz-placeholder, textarea::-moz-placeholder{color: rgba(255,255,255,.5)}
    input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: rgba(255,255,255,.5)}

    消除input、textarea点击后出现蓝色边框

    input, textarea{outline:none}

    浏览器滚动条设置

    ::-webkit-scrollbar-track-piece{width:8px;background-color:#f0f0f0}
    ::-webkit-scrollbar{width:8px;background-color:#00C0FF}
    ::-webkit-scrollbar-thumb{width:8px;background-color:#333}
    ::-webkit-scrollbar-thumb:hover{width:8px;background-color:#00C0FF}

    常用的js/jquery插件

    jquery.bxslider    轮播
    wow        页面动画
    placeholder    生成占位图
    jquery.countup  数字滚动
    jquery.countdown  倒计时
    jquery.laydate  时间选择
    jquery.customSelect  下拉列表
    jquery.easing  动画扩展
    jquery.prettyPhoto  图片插件
    jquery.raty  评分插件
    jquery.validate  表单验证
    html5shiv 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。 respond.min 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
  • 相关阅读:
    mysql把一个表的字段update成另一个表的字段根据id
    1月房地产企业销售TOP100出炉 万科重回第一
    别拿学历说事,这些天王中学没毕业,最低的是成龙
    马云:未来经济形势很艰难,需要企业家挺身而出
    私有云与公有云区别,公有云不可能统一天下
    除了首付,购房预算还须有这7项才能买到房!
    房产交易中的10个非典型问题 你肯定不懂!
    几个常用快速无损压缩算法性能比较
    ValueTask
    Mobaxterm
  • 原文地址:https://www.cnblogs.com/inzens/p/10284740.html
Copyright © 2011-2022 走看看