编程技术

Document

html5+css+javascript常用总结

1，单行和多行省略...

单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

2，自定义设置placeholder样式

input::-webkit-input-placeholder {
    color: #999;     
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #999;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #999;
}

3，jquery 点击元素以外任意地方隐藏该元素的方法(事件冒泡)

<script type="text/javascript">
        $(document).click(function () {
            alert("测试");
        });

        $(".ceshi").click(function (event) {
            event.stopPropagation();
        });
</script>

4，pointer-events:none; 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。

5，小程序使用字体图标操作步骤

小程序使用字体图标
操作步骤：
http://www.wxappclub.com/topic/1843

字体图标网址：
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3

字体图标生成网址：
https://icomoon.io/app/#/select

转换网址：
https://transfonter.org/

6，web端的变灰只要一行代码

html标签加上

-webkit-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);

7，页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，而@import是css提供的；

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

link方式的样式的权重高于@import的权重。