1. input中的placeholder
首先我们定义一个input:
<input type="text" placeholder="你点我啊!" />12
当我们使用输入框input中的placeholder时经常需要调里面字体的大小和其他样式,(由于兼容性问题,对应浏览器不同,所以要针对浏览器用不同的代码。)这时就需要用到如下代码:
input::-webkit-input-placeholder { /*谷歌*/ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: black; } input::-moz-placeholder { /*火狐 19+ */ color: pink; } input:-moz-placeholder { /*火狐 18-*/ color: yellow; }12345678910111213141516
(简单用谷歌来实现一下,效果如下图:)
2.单行多行文本加省略号
在做一些纯css页面时 偶尔要用到文本加省略号,特别是多行文本居中,很容易忘记里面一些代码
/* 单行文本加省略号 */ .text { /* 注意定宽 */ width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 8px; } /*多行文本加省略号 */ .texts { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }123456789101112131415161718
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
3.做一个三角形
做一些下拉框或者列表的时候 做一个小三角就会用到了,不用设置宽高,利用边框宽度,只需要留下一个边框的颜色,其他边框设置成transparent即可
/* css做一个三角形 */ .trangle { width: 0; height: 0; border: 20px solid red; border-color: transparent transparent red transparent; }1234567
4.绝对定位后使其居中
注意要使用transform: translate(-50%, -50%); 来让它以中心点平移,当然你也可以使用margin来调节。
另外其他方法居中也有很多种,高等与行高来垂直居中等其他方法(由于常用就不列举了)
.center { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: pink; text-align: center; }12345678910
5.去除重复边框
首先要在大表格(最外面表)中写下面的代码:
table { border-collapse: collapse; }123
然后再设置tr。th。td的边框就没问题了。
原文链接:***/hxp2288665/article/details/108836684?utm_medium=distribute.pc_category.none-task-blog-hot-18.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-18.nonecase&request_id=
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com