<!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. Linux学习系列之lvs+keepalived

    LVS简介 LVS介绍 LVS是Linux Virtual Server的缩写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,属于4层负载均衡 ipvs和ipvsadm的关系 我们使用配置LV ...

  2. golang中关闭http server

    golange 开启http server 服务之后,怎么关闭呢? ------------------------------------------------------------------ ...

  3. IOS-Storyboard控制器切换之Modal(1)

    Modal模式是指模态切换.新开的界面会挡住之前的界面,使之不能获取焦点. 创建一个singleView模板的程序,打开storyboard文件.拖动2个UIViewController到界面中.按住 ...

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

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

  5. Django打造大型企业官网（八）

    4.16.侧边栏标题和广告位布局完成 templates/news/index.html <div class="sidebar-wrapper"> <div c ...

  6. Angular Scope解析与应用

    Scope层级结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA== ...

  7. Android 网络学习之获取server文本文件

    上次我们学习怎样从网络上获取一张图片,今天我们学习怎样从网络上获取文本文件.以XML文件为样例. 由于XML文件在实际开发中最为常见. 我们以以下图片为样例学习怎样从网络上获取XML文件 我们的xml ...

  8. Canny算法源码，欢迎交流

    http://blog.csdn.net/jianxiong8814/article/details/1563109 http://blog.csdn.net/assuper/article/deta ...

  9. 【bzoj1042】[HAOI2008]硬币购物

    首先使用DP预处理,先求出,在不考虑每种硬币个数的限制的情况下,每个钱数有多少种拼凑方案. 为了避免重复的方案被转移,所以我们以硬币种类为第一层循环,这样阶段性的增加硬币. 一定要注意这个第一层循环要 ...

  10. expand_dims

    tf.expand_dims  |  TensorFlow https://tensorflow.google.cn/api_docs/python/tf/expand_dims tf.expand_ ...