常用css相关笔记
最后一个css不加样式
.nav-sort li:not(:last-child) {
border-bottom:#3e3e3e 1px solid;
}
垂直居中
vertical-align: middle;
超出部分省略号 第一种方法,crome不兼容
p{
/**
white-space:nowrap;表示文本不会换行,在同一行继续,知道遇到
标签为止;
overflow:hidden;不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
text-overflow:ellipsis;当文本对象溢出是显示...,当然也可是设置属性为clip不显示点点点;
-o-text-overflow:为了兼容opera浏览器;
*/
width:200px;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
}
div{
/*文字超出高度不显示*/
overflow:hidden;
display:block;
height:60px;
width:100px;
}
第二种方法
@-moz-documentc url-prefix(){
p{
position: relative;
line-height: 20px;
max-height: 40px;//设置最大高度,加上overflowhidden,正好是两行,使超出部分隐藏
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;//以上三个属性,可以后续调整,看要把...放在哪个位置
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);//背景色可写成渐变也可写成一样的颜色
}
}
原理是自己写一个… 放在最后一行的末尾。
https://blog.csdn.net/weixin_42453802/article/details/85166114
a标签 无decoration 手势
.integral ul li a{
text-decoration: none;
cursor:pointer;
}
图片transform
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.4);
}
transition: all 0.6s; 表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4); 表示在鼠标放到图片上的时候图片按比例放大1.4倍。
常用css相关笔记的更多相关文章
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- Git常用命令清单笔记
git github 小弟调调 2015年01月12日发布 赞 | 6收藏 | 45 5k 次浏览 这里是我的笔记,记录一些git常用和一些记不住的命令,这个笔记原本是基于 颜海镜的文章增加 ...
- !!!常用CSS代码
http://www.cnblogs.com/qq21270/p/4854643.html 伪类 http://www.cnblogs.com/qq21270/p/4891167.html CSS3动 ...
- 常用CSS技术收藏
常用CSS技术收藏 必须要掌握的技术 盒子模型 定位模型 定位模型 css sprite(雪碧/css精灵)相关 css sprite 坐标定位为何为负以及定位方法 布局 圣杯布局小结 规范 BEM ...
- HTTPS证书申请相关笔记
申请免费的HTTPS证书相关资料 参考资料: HTTPS 检测 苹果ATS检测 什么是ECC证书? 渠道2: Let's Encrypt 优点 缺点 Let's Encrypt 的是否支持非80,44 ...
- Head First HTML与CSS阅读笔记(二)
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
随机推荐
- Replicate(网络复制),ActorRole(角色),Ownership(所有权)以及RPC(远程调用)等等
I. Replication Replication指的是 从服务端向客户端 传递数据和信息的行为.注意是单向的,不会从客户端传递信息和数据到服务端. 假设一个Actor被设置为Replicates, ...
- [BZOJ2791]:[Poi2012]Rendezvous(塔尖+倍增LCA)
题目传送门 题目描述 给定一个有n个顶点的有向图,每个顶点有且仅有一条出边.每次询问给出两个顶点${a}_{i}$和${b}_{i}$,求满足以下条件的${x}_{i}$和${y}_{i}$: ...
- python相关遗漏知识点补充
python中的相关帮助命令 假设s是一个字符串, 那么dir(s)可以列出字符串对象的所有属性(方法也是函数属性),其中有下划线的部分与类重 载有关,用来表示python实现细节,没有下划线的属性是 ...
- session与cookie区别与联系
一.Session的概念 Session 是存放在服务器端的,类似于Session结构来存放用户数据,当浏览器 第一次发送请求时,服务器自动生成了一个Session和一个Session ID用来唯一标 ...
- json-server 服务器的接口
服务器接口的数据在浏览器网络地址中,便可查看: 获取接口的数据需要在网络地址后面,填写接口的名字即可,(对于 json-server来说)
- Android传感器【转】
本文转载自:http://blog.csdn.net/ffmxnjm/article/details/52101592?locationNum=3&fps=1 传感器的意义 事实上,目前智能手 ...
- (转)使用NMAP工具扫描端口
原文:http://www.linuxde.net/2013/02/12354.html nmap 是一个用于网络探索或安全评测的工具.它支持 ping 扫描(判定哪些主机在运行),多端口扫描技术(判 ...
- Linux_系统时间管理
目录 目录 时间管理 date指令 系统时间设置timedatectl指令 本地时间同步 时间服务器NTP RHEL6 RHEL7 计划任务 一次性计划任务 at指令 限制用户建立一次性计划任务 周期 ...
- windows 把ps/2 鼠标当成ps/2键盘了
真坑口阿 https://zhidao.baidu.com/question/425134865713508932.html 电脑的PS/2鼠标接口认成键盘了 电脑主板技嘉,只有一个PS/2接口.开始 ...
- laravel 使用PhantomMagick导出pdf ,在Linux下安装字体
git项目地址:https://github.com/anam-hossain/phantommagick sudo apt-get -y install fontconfig xfonts-util ...