文字超出部分用省略号显示:

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样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)的更多相关文章

  1. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  2. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  3. Css解决表格超出部分用省略号显示

    小伙伴们有没有的遇到页面显示时,因为数据太长导致显示的表格某一列过长,从而导致页面的不美观,下面我们来看一看如何用Css样式解决表格超出部分用省略号显示的问题. 主要设置两个样式: table{ ta ...

  4. CSS样式-文字超出宽部分用省略号代替

    .name {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display:block;width:120px;    }

  5. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  6. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  7. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  8. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  9. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

随机推荐

  1. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  2. 序-WEB方向指南

    WEB 这个方向其实是目前从业人员最多的方向,也是学习安全门槛最低的方向,当然也是最容易恰饭的方向. 我从入行到现在也依旧没有脱离它,毕竟在我这个小城市.小圈子里,不干这个好像就要没饭吃了,但是你说它 ...

  3. (精)题解 guP4878 [USACO05DEC] 布局

    差分约束模版题 不过后三个点简直是满满的恶意qwq 这里不说做题思路(毕竟纯模板),只说几个坑点: 1. 相邻的两头牛间必须建边(这点好像luogu没有体现),例如一组数据: 4 1 1 1 4 10 ...

  4. passwd 简单记录

    passwd [选项] 登录名 -e,--expire 强制用户密码过期 这时候需要使用root账户给tel用户重新设置密码 -l,--lock 锁定指定用户密码 -u, --unlock 给指定账户 ...

  5. 传统.NET 4.x应用容器化体验(3)

    上一篇我们自己通过编写Dockerfile来编译部署一个ASP.NET MVC应用程序到Windows Container,这一篇我们来试着将.NET 4.x的镜像推送到harbor私有镜像仓库. 1 ...

  6. react-router4 介绍

    react-router 的理解: 1) react 的一个插件库2) 专门用来实现一个 SPA 应用3) 基于 react 的项目基本都会用到此库 SPA  的理解: 1) 单页 Web 应用(si ...

  7. Spark—初识spark

    Spark--初识spark 一.Spark背景 1)MapReduce局限性 <1>仅支持Map和Reduce两种操作,提供给用户的只有这两种操作 <2>处理效率低效 Map ...

  8. Selenium3自动化测试【20】CSS定位元素

    CSS 指层叠样式表 (CascadingStyleSheets),CSS一种用来表现HTML或XML等文件样式的计算机语言,其能够灵活的为页面提供丰富样式的风格. CSS使用选择器为页面元素绑定属性 ...

  9. Python - 基础数据类型 list 列表

    什么是列表 列表是一个有序的序列 列表中所有的元素放在 [ ] 中间,并用逗号分开 一个 列表 可以包含不同类型的元素,但通常使用时各个元素类型相同 特征 占用空间小,浪费内存空间少 声明列表变量 列 ...

  10. 数据库count用法

    count(*)包括了所有的列,相当于行数,在统计结果的时候,不会忽略列值为NULL  count(1)包括了所有列,用1代表代码行,在统计结果的时候,不会忽略列值为NULL  count(列名)只包 ...