<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>携程tab</title>

        <style type="text/css">

            .img{

                height: 110px;

                width: 220px;

                position: relative;

                overflow: hidden;

            }

            .img img{

                width: 220px;

            }

            .message{

                background: url(http://pic.c-ctrip.com/platform/online/home/un_sprite_tag.png);

                position: absolute;

                top: 0;

                left: 20px;

                height: 41px;

                width: 41px;

                text-align: center;

                color: white;

                font-size: 14px;

                padding-top: 5px;

                /*overflow: hidden;*/

                box-sizing: border-box;

            }

            .sell{

                position: absolute;

                bottom: 0;

                background: rgba(0,0,0,0.5);

                color: white;

                width:100%;

                font-size: 14px;

                height: 30px;

                line-height: 30px;

            }

            .area{

                width: 220px;

                overflow: hidden;

                text-overflow: ellipsis;

                white-space: nowrap;

                font-size: 12px;

            }

            .img:hover img{

                transform: scale(1.2);

            }

        </style>

    </head>

    <body>

        <div class="img">

            <img src="https://dimg03.c-ctrip.com/images/100s0800000033z714C56_C_500_280.jpg" />

            <span class="message">特卖</span>

            <div class="sell">超正航班，超级特卖</div>

        </div>

        <div class="area" title="巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店">巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店 </div>

    </body>

</html>

携程transform放大效果的更多相关文章

  1. 携程App的网络性能优化实践

    首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...

  2. css3放大效果

    参考案例: http://www.web-designers.cn/ http://www.harmay.com/ 鼠标经过图片,图片放大. 1.html: <body> <div& ...

  3. 我所了解的各公司使用的 Ceph 存储集群 (携程、乐视、有云、宝德云、联通等)

    Ceph 作为软件定义存储的代表之一,最近几年其发展势头很猛,也出现了不少公司在测试和生产系统中使用 Ceph 的案例,尽管与此同时许多人对它的抱怨也一直存在.本文试着整理作者了解到的一些使用案例. ...

  4. 携程Android App插件化和动态加载实践

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

  5. 用CSS3实现对图片的放大效果

    用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-tra ...

  6. 【BFS + Hash】拼图——携程2017春招编程题2

    写在前面 前天参加了携程的网测--还是感觉自己太!渣!了!    _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...

  7. 携程Android App的插件化和动态加载框架

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

  8. Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触

    一.瞎扯点什么 1.1 阿波罗 ​ 阿波罗是希腊神话中的光明之神.文艺之神,同时也是罗马神话中的太阳神:他是光明之神,从不说谎,光明磊落,在其身上找不到黑暗,也被称作真理之神.他非常聪明,通晓世事,是 ...

  9. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

随机推荐

  1. 建立DHCPserver

    一.实验的目的:     实现以下的要求的DHCPserver,了解子网内的IP分配的情况. 二.实验目标 虚拟机 vm1:192.168.6.3/24属于子网VMnet8. 在其上建立DHCPser ...

  2. openstack （1）----- NTP 时间同步服务

    一.标准时间 1.地球分为东西十二个区域,共计24个时区 2.格林威治作为全球标准时间即(GMT时间),东时区以格林威治时区进行加,而西时区则进行减 3.地球的轨道并非正圆,在加上自传速度逐年递减,因 ...

  3. [Android Studio] 取消引用库打包出现异常-- provided dependencies can only be jars

    Warning: Project App: provided dependencies can only be jars. com.android.support:appcompat-v7:22.2. ...

  4. dumpdecrypted进行砸壳

    1.下载源码git clone git://github.com/stefanesser/dumpdecrypted/ 2.进行编译生成 dumpdecrypted.dylibmake 3.将dump ...

  5. [办公应用]如何设置IE打印时的默认页边距，并设置纸张为横向（会计票据打印）

    最近一个做会计的同事询问,如何将IE打印时的默认页边距更改,并且每次都要是横向的纸张. 这是因为她已经测试好纸张的大小,并据此调整好了页边距.可惜的是下一次打印时,又要重新调整一遍. 经过研究,方法如 ...

  6. C#项目的生成事件及批处理文件

    一个C#项目,如果为同一个解决方案的其他项目所引用,则其编译后,会将DLL拷贝到引用项目中:但如果它并不被其他项目引用,但又想编译后能够自动将生成的东西拷贝过去,可以在项目的生成事件中,写上一些批处理 ...

  7. js 判断手机横竖屏的实现方法（不依赖任何其他库）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 用C语言实现websocket服务器

    Websocket Echo Server Demo 背景 嵌入式设备的应用开发大都依靠C语言来完成,我去研究如何用c语言实现websocket服务器也是为了在嵌入式设备中实现一个ip camera的 ...

  9. 【JSOI 2011】 分特产

    [题目链接] 点击打开链接 [算法] 考虑求每个人可以不分的方案 那么,对于每件物品,我们把它分成n份,每一份对应分给每一个人,有C(a[i]+n-1,m-1)种方案,而总方案数就是每种 物品方案数的 ...

  10. 洛谷P1719 最大加权矩形

    题目描述 为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她们都是电脑组的高手,校长没 ...