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的权重。
上一篇: HTML+CSS
下一篇: 【前端】导航栏htm