常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示:
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分不显示 */
text-overflow: ellipsis; /* 超出部分显示为... */
鼠标经过图片放大
.team-img img{
width:188px;
height: 200px;
border-radius: 50%;
transition: all 1.2s;
-moz-transition: all 1.2s;
-webkit-transition: all 1.2s;
-o-transition: all 1.2s;
}
.team-img img:hover{
transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
鼠标经过,div出现阴影
.team-item{
background: #fff;
border-radius: 7px;
transition: all .3s linear;
}
.team-item:hover{
transition: .3s all;
box-shadow: 0px 6px 17px #888888;
}
常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)的更多相关文章
- html使用css让文字超出部分用省略号三个点显示的方法案例
html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- Css解决表格超出部分用省略号显示
小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...
- CSS样式-文字超出宽部分用省略号代替
.name {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display:block;width:120px; }
- 【css】文本超出行数以省略号显示
//超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- 11种常用css样式之background学习
background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
随机推荐
- dp 套 dp扯谈
1.[扯谈概念] \(dp\) 套 \(dp\) 其实也就是 \(dp\) . 这里就定义下面两个概念: 内层 \(dp\) 表示的是被套在里面的那个 \(dp\) 外层 \(dp\) 表示的是最外面 ...
- 关于hive的基础
Hive基础 1.引入原因 对存在HDFS上的文件或HBase中的表进行查询时,是要手工写一堆MapReduce代码 对于统计任务,只能由懂MapReduce的程序员才能搞定 事实上,许多底层细节实际 ...
- dev c++处理汉字
工具--编译选项--编译器 在连接器命令行加入以下命令 -static-libgcc -finput-charset=GBK -fexec-charset=GBK 有些处理汉字的程序运行正常,但E ...
- python 异常获取方法
import sys #第1:print(6/0) #直接运行该命令,出现异常,程序终止 #异常提示: '''Traceback (most recent call last): File " ...
- 学前端的第一门语言HTML
学前端最终要做的就是制作各种各样的网页,html就相当于网页的骨架,所以我们学习前端的第一步就是先学html,接下来学习什么是html. 什么是HTML? HTML指的是超文本标记语言(Hyper T ...
- File类与常用IO流第三章IO流概述
一:以内存为基准,按照数据的流动方向,流向内存为输入(读取数据),流出内存为输出.IO流有四大顶级父类: IO流四大顶级父类 输入流 输出流 字节流 字节输入流 InputStream 字节输出流 ...
- Spring RestTemplate 之put、delete请求
●PUT请求:在RestTemplate中,PUT请求可以通过put方法调用,put方法的参数和前面介绍的postForEntity方法的参数基本一致,只是put方法没有返回值而已.举一个简单的例子, ...
- Postman进行webservices接口测试
1.接口地址 webservices是什么? 更多webservices接口地址访问地址:http://www.webxml.com.cn/zh_cn/web_services.aspx webser ...
- 图像旋转的FPGA实现(一)
继续图像处理专题,这次写的是图像旋转.若要说小分辨率的图像旋转倒也简单,直接将原始图像存储在BRAM中,然后按照旋转后的位置关系取出便是.但是对于高分辨的图像(720P及以上)就必须得用DDR3或者D ...
- [考试总结]noip模拟22
又发现模拟 \(22\) 的总结也咕掉了,现在补上它... 似乎又是gg的一场. 以为自己的部分分数打的很全,然而到后面发现自己的树剖打假了 \(\color{green}{\huge{\text{树 ...