美文网首页
开发中遇到的css样式总结

开发中遇到的css样式总结

作者: 小小_chao | 来源:发表于2019-12-11 13:44 被阅读0次
1.input placeholder样式修改
input::-webkit-input-placeholder {color:#999;font-size:14px;}
input:-moz-placeholder {color: #999;font-size:14px;}
input:-ms-input-placeholder {color: #999;font-size:14px;}
2.文本超出部分省略号代替
/*单行*/
.class{width:100px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
/*多行----有兼容性问题*/
.class{width:100px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
3.滚动条样式修改
/*滚动条隐藏*/
.class::-webkit-scrollbar{display: none;}
/*滚动条样式*/
.class::-webkit-scrollbar{width:6px;background:#E9ECF9;}
.classl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}
.class::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #EDEDED;}
4.table固定thead,tbody滚动
table thead{color: #000;font-weight: inherit;width: calc(100% - 1.2em);display: table;}
table thead tr{color: #000;font-weight:600;display: table;width: 100%;table-layout: fixed}
table tbody{display: block;overflow-y: scroll;max-height:540px;}
table tbody tr{table-layout: fixed;display: table;width: 100%;} 
5.table中td高度自适应: https://blog.csdn.net/m0_37885651/article/details/80609558

注:以上内容均为本人在页面编写中所遇到的css问题查找结果

相关文章

网友评论

      本文标题:开发中遇到的css样式总结

      本文链接:https://www.haomeiwen.com/subject/ablogctx.html