常用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 ...
随机推荐
- BOM和DOM的操作
到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互.也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知 ...
- Linux简介安装、系统启动过程、目录结构
Linux简介安装.系统启动过程.目录结构 Linux 教程 Linux 英文解释为 Linux is not Unix. Linux 简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus ...
- select * from (XXXXX)[字符]——写法解析
步骤:1.先执行括号里的语句:查询 select id from three ,将查询出来的数据作为一个结果集 取名为 a2.然后 再 select * from a 查询a ,将 结果集a 全部查询 ...
- 大v用户数据统计分析
1,统计数据的基本情况,包括微博总数,用户总数,最活跃和最不活跃的用户id #!/bin/sh source_dir=/home/minelab/data/DATA source_file_name= ...
- centos7 安装 chrome
1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /etc/yum.repos.d/ vim google-chrome.repo ...
- iOS自动化--Spaceship使用实践
Spaceship ### 脚本操作 证书,app,provision等一些列apple develop后台操作,快速高效. github地址 spaceship开发文档 文档有列出常用的api调用d ...
- nginx请求转发配置
以下为无ssl证书配置的请求转发 server { listen ; server_name api.****.com; #以下为指定请求域名匹配到某一个端口 #location ~* /union ...
- 吃着火锅唱着歌学会Docker
第一篇:Docker概述 第二篇:Docker之版本与安装 第三篇:Docker之镜像 第四篇:Docker之容器 第五篇:Dcoker之容器与镜像 第六篇:Docker之网络管理 第七篇:Docke ...
- OpenStack 实现技术分解 (6) 通用库 — oslo_log
目录 目录 前文列表 扩展阅读 日志级别 oslolog 初始化设置 DEMO oslolog 的相关配置项 oslolog 的日志级别 oslolog 的使用技巧 推荐使用 LOGdebug 的地方 ...
- 分布式消息队列 Celery 的最佳实践
目录 目录 不使用数据库作为 Broker 不要过分关注任务结果 实现优先级任务 应用 Worker 并发池的动态扩展 应用任务预取数 保持任务的幂等性 应用任务超时限制 善用任务工作流 合理应用 a ...