<!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. Android 实现形态各异的双向側滑菜单 自己定义控件来袭

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935.本文出自:[张鸿洋的博客] 1.概述 关于自己定义控件側滑已经写了 ...

  2. C# .NET using ManagementObjectSearcher提示缺少引用怎么办

    在下图中,即使引用了System.Management还是会出现报错   其实只要添加这条引用就可以了

  3. SQL的事务回滚操作带案例分析

    SET XACT_ABORT on  BEGIN TRAN  INSERT INTO [PDA_Action] VALUES ('採购入库1')  INSERT INTO [PDA_Action] V ...

  4. MFC中按下Buttonbutton，弹出一个窗体的同一时候关闭本窗体

     CMyDlg *dlg = new CMyDlg();                //新建一个CMyDlg对象 this->ShowWindow(SW_HIDE);           ...

  5. 告诉大家我是如何在14:00秒杀到 《深入理解Bootstrap》

    1.打开火狐,不用IE,3个评论窗口,层叠在一起,可以点击3次哦. 2.打开一个百度的现在时间,不能看你本机的时间,要互联网的时间. 3.等时间到13:59:59,开始依次点击按钮,总有你预想不到的结 ...

  6. location.replace

    [root@bigdata-server-01 ~]# curl www.baidu.com<!DOCTYPE html><!--STATUS OK--><html> ...

  7. 学习MAP 地图好地址

    http://www.cnblogs.com/beniao/archive/2010/01/13/1646446.html Bēniaǒ成长笔记在IT江湖里我不是一名老手,我只是一名普通的程序员,愿意 ...

  8. 【Codevs 1376】帕秋莉•诺蕾姬

    http://codevs.cn/problem/1376/ 枚举修改哪两位,将sum减去之前位置的数+交换之后  %m==0即可 预处理26的次方+O(n^2) // <1376.cpp> ...

  9. go 安装方法

    wget https://storage.googleapis.com/golang/go1.5.linux-amd64.tar.gz sudo tar -C /usr/local -xzf go1. ...

  10. Java 高级数据结构 —— Properties

    1. Properties Properties 是 Java 的内置实现: public class Properties extends Hashtable<Object,Object> ...