<!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. 【BLE】CC2541之自己定义长短按键

    本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文以SimpleBLEPeripheral为例,介绍怎样将普通IO口(P12)自己定义为长短按键,实现按键3S以内松开为短按 ...

  2. linux 下使用genymotion

    在官网下载genymotion http://www.genymotion.cn/ 然后进行下面操作 1.假设本机没有virtualbox 下载一个  能够通过指令 sudo apt-get inst ...

  3. HDU 5067 Harry And Dig Machine（状压dp）

    HDU 5067 Harry And Dig Machine 思路:因为点才10个,在加上一个起点,处理出每一个点之间的曼哈顿距离,然后用状压dp搞,状态表示为: dp[i][s],表示在i位置.走过 ...

  4. hive中使用正則表達式不当导致执行奇慢无比

    业务保障部有一个需求,须要用hive实时计算上一小时的数据.比方如今是12点,我须要计算11点的数据,并且必须在1小时之后执行出来.可是他们用hive实现的时候发现就单个map任务执行都超过了1小时, ...

  5. Jenkins performance插件生成性能测试报告【待完成】

    https://segmentfault.com/a/1190000018651092 本地window运行 命令执行:F:\study\apache-jmeter-4.0\apache-jmeter ...

  6. 容器Vector原理（学习）

    一.概述 数据结构同ArrayList,底层都是数组存储,只不过是线程同步的,也就是其 操作方法都是synchronized

  7. Code First：Data Anotation (2)

    示例一 本例演示与索引有关的内容,模型: using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAn ...

  8. bzoj1531

    背包+倍增 直接背包跑不过去,那么我们把容量分成二进制,然后原来需要枚举c次就只用枚举log(c)次了,这样还是能组合出任意小于等于c的组合方案 #include<bits/stdc++.h&g ...

  9. http报文和协议首部

    http报文和协议首部 http报文 3>报文格式 request 报文 <method> <request-URL> <version> <heade ...

  10. E20180109-E

    auxilary  adj. 辅助的; 备用的,补充的; 附加的; 副的;               n. 助动词; 辅助者,辅助人员; 附属机构,附属团体; 辅助设备;