那些常用却又常忘记的css样式是什么

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

(简单用谷歌来实现一下,效果如下图:)

那些常用却又常忘记的css样式

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的边框就没问题了。

那些常用却又常忘记的css样式

原文链接:***/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

(0)
上一篇 2023年 7月 18日 下午2:28
下一篇 2023年 7月 18日 下午2:38

相关推荐

  • 爱奇艺会员免费获取的大攻略

    爱奇艺有很多的视频资源,想要看的时候却看不了,只能购买vip,可是为了某一个视频买vip又舍不得,怎么办呢?今天我们就来说下如何免费获取爱奇艺vip。 01 方法一:通过百度积分获…

    2023年 1月 6日
  • 单位邮箱怎么申请教程

    单位办公通常会选择VIP邮箱,因为VIP邮箱容量、安全性、收发邮件的速度、稳定性都更好。在设置邮箱名字时,选择也更多,能用公司名字、项目名字,或是888这样的靓号也能注册的到。16…

    2023年 5月 12日
  • 最便宜的电影票是多少钱(怎么才能买最便宜的电影票)

    每次看电影买票是去店里买还是网上买?我猜大多数都是在网上买的,因为网上买不仅比店里买便宜一半的价格而且还方便!如果是在网上买,那么多票务平台你又是在哪一家买呢? 这么多购买电影票的…

    2023年 10月 27日
  • 要怎么彻底删除微信聊天记录(如何彻底清除已删除微信聊天记录)

    如果您的手机内存少或者已经用了很多年了都没有清理过内存的话,那么您的微信肯定占用了您的手机很大的储存量,查看微信中的占用内存后,你将会大吃一惊,怎么聊天可以用了这么多的内存呢?因为…

    2023年 3月 16日
  • 什么是广告不锈钢发光字

    不锈钢发光字,发光字(或称为灯箱字),特别是不锈钢灯箱字,既具有不锈钢字的金属质感,又兼具亚克力发光字亮化、美化、装饰效果,美化、标识和广告效果特别好,是目前金属字衍生产品的主流。…

    2023年 10月 13日
  • 去医院看病用手机怎么挂号

    根据《上海市“便捷就医服务”数字化转型2.0工作方案》要求,嘉定对全区公立医疗机构开展就医流程数字化转型。目前,21家公立医疗机构完成智能分诊导诊、智能院内导航、智能识别通行、医疗…

    2023年 4月 9日
  • 2021苹果年度游戏(苹果手机战略策略游戏银河系战争)

    今日,苹果公司在其App Store全球范围内公布了年度游戏大奖。 曾得到过WWDC苹果设计奖的《Splitter Critters》被评为2017年度全球最佳iPhone游戏。 …

    2023年 4月 20日
  • 实操总结手把手教你做对账系统

    在做对账系统之前,需要掌握一定的财务知识。对账系统很难做,网络上基本没有手把手教怎么做对账系统的。本文作者结合自身所经历的对账系统项目进行自我梳理整合输出,希望能够对你有所帮助。 …

    2023年 10月 28日
  • 淘宝联盟和淘客联盟是一样吗,淘宝联盟限制小淘客

    1.什么是淘宝联盟 淘宝联盟隶属于阿里巴巴集团旗下,于2010年4月8号正式成立,依托阿里巴巴集团强大的品牌号召力和淘宝联盟人的不懈努力,淘宝联盟汇聚了大量电子商务营销效果数据和经…

    互联网 2023年 3月 26日
  • wifi助手是干嘛的

    今天鱼哩给大家推荐两款WiFi小帮手。一款是大家比较熟悉的WiFi助手,是基于QQ浏览器上的WiFi小帮手,功能比较强大,酒店、商铺附近大多数WiFi都可以破解连接,且不怎么占用手…

    2023年 7月 5日