<!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. JSP页面怎样导入优酷视频

    我在做的一个项目里面,应客户要求.要导入视频.然后我再考虑,视频是直接放在本地数据库的话,那么肯定会出现数据视频读取反应慢. 那么,就能够把视频先传到优酷上面,然后再直接应用优酷视频上的html代码, ...

  2. LVS 负载均衡 （VS/DR模式 与 VS/TUN 模式）

    一.VS/DR模式 ①.客户端将请求发往前端的负载均衡器,请求报文源地址是CIP,目标地址为VIP. ②.负载均衡器收到报文后,发现请求的是在规则里面存在的地址,那么它将目标MAC改为了RIP的MAC ...

  3. Jenkins 使用

    Jenkins 安装 Jenkins是用Java语言开发的系统,首先要确定服务器上已经安装JDK或者JRE. 安装方式一 直接运行java –jar Jenkins.war,在浏览器中输入 http: ...

  4. rk3188调试记录

    1.编译 # . build/envsetup.sh # lunch  7    7. PI3910-user 1.电池部分 init.rc启动healthd-charger服务.对电池进行检測 se ...

  5. iOS 特定图片的button的旋转动画

    近期做的东西中,要为一个有特定图片的button加入旋转动画,Demo代码例如以下: #import "ViewController.h" @interface ViewContr ...

  6. bzoj5311: 贞鱼

    还是年轻啊算的时候少乘一个4000被卡二分上界了...%%%%bright教我超级快速读D飞bzoj垃圾卡常数据 我们容易写出这样的DP方程:f[i][j]=f[k][j-1]+val(k+1,j) ...

  7. C# oracle 参数传递的多种方式 留着复习

    ORA-01036 非法的变量名/编号,(解决) 博客分类: oracle SQL  下边的代码就会造成  ORA-01036 非法的变量名/编号 cmd.CommandText = "SE ...

  8. [LeetCode] LRU Cache [Forward]

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  9. Java序列化系列教程（上）

    一定义以及相关概念 互联网的产生带来了机器间通讯的需求,而互联通讯的双方需要采用约定的协议,序列化和反序列化属于通讯协议的一部分.通讯协议往往采用分层模型,不同模型每层的功能定义以及颗粒度不同,例如: ...

  10. RAR去除广告

    现在注册已经不能去掉广告了,给你一个100%有效的办法(##此教程已更新,最新的winrar5.5同样适用,但是多了一个步骤) 电脑桌面新建一个txt文件,重命名为“rarreg.key” 2. 将. ...