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

  1. white-space: nowrap; /* 不换行 */
  2. overflow: hidden; /* 超出部分不显示 */
  3. text-overflow: ellipsis; /* 超出部分显示为... */

鼠标经过图片放大

  1. .team-img img{
  2. width:188px;
  3. height: 200px;
  4. border-radius: 50%;
  5. transition: all 1.2s;
  6. -moz-transition: all 1.2s;
  7. -webkit-transition: all 1.2s;
  8. -o-transition: all 1.2s;
  9. }
  10. .team-img img:hover{
  11. transform: scale(1.2);
  12. -moz-transform: scale(1.2);
  13. -webkit-transform: scale(1.2);
  14. -o-transform: scale(1.2);
  15. -ms-transform: scale(1.2);
  16. }

鼠标经过,div出现阴影

  1. .team-item{
  2. background: #fff;
  3. border-radius: 7px;
  4. transition: all .3s linear;
  5. }
  6. .team-item:hover{
  7. transition: .3s all;
  8. box-shadow: 0px 6px 17px #888888;
  9. }

常用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. 测试基础(四)Jmeter基础使用

    前言 通过测试基础(三) Jmeter安装 - 大风北吹 - 博客园 (cnblogs.com)安装完成Jmeter后,就可以使用Jmeter进行性能测试. 一.线程组 (1).线程组分类 Jmete ...

  2. [Qt]-打包程序为Debian的deb格式的安装包

    参考:https://segmentfault.com/a/1190000005029385 参考:UnityLaunchersAndDesktopFiles deb是Debian Linux的软件包 ...

  3. Python单元测试框架unittest之生成测试报告(HTMLTestRunner)

    前言 批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的. unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLT ...

  4. asp.net c# 保存图片到sql2008

    //图像数据表:tx//字段id (nvarchar(50) ,image(image)//tgav为图片ID,实质为上传前的主名 (省略了.jpg)private void kkkkk(byte[] ...

  5. css颜色介绍和背景设置

    现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色和背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然. 颜色表达形式 1.RGB:rgb( red, ...

  6. jquery性能优化建议-上篇

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); / ...

  7. spring-4-申明事务

    categories: spring5 事务回顾 事务在项目开发过程非常重要,涉及到数据的一致性的问题,不容马虎! 事务管理是企业级应用程序开发中必备技术,用来确保数据的完整性和一致性. 事务就是把一 ...

  8. 《PHP 实现 Base64 编码/解码》笔记

    前言 早在去年 11 月底就已经看过<PHP 实现 Base64 编码/解码>这篇文章了,由于当时所掌握的位运算知识过于薄弱,所以就算是看过几遍也是囫囵吞枣一般,不出几日便忘记了其滋味. ...

  9. router-link与router-view的对应关系和映射特点

    router-link对应的router-view规律为: 1.根据to的值而定,值为一层(如 /child)则对应app.vue中的router-view: 值为两层,如 /second/child ...

  10. Vue全局引入JS的方法

    两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...