效果图如下：

<body>

    <div class="nav">

        <div class="row">

            <div class="col1">

                <a href="#">

                    <em>酒店</em>

                    <i></i>

                </a>

            </div>

            <div class="col2">

                <a href="#"><em>特价酒店</em></a>

                <a href="#"><em>海外酒店</em></a>

            </div>

            <div class="col3">

                <a href="#"><em>特价酒店</em></a>

                <a href="#"><em>海外酒店</em></a>

            </div>

        </div>

        <div class="row">

                <div class="col1">

                    <a href="#">

                        <em>酒店</em>

                        <i></i>

                    </a>

                </div>

                <div class="col2">

                    <a href="#"><em>特价酒店</em></a>

                    <a href="#"><em>海外酒店</em></a>

                </div>

                <div class="col3">

                    <a href="#"><em>特价酒店</em></a>

                    <a href="#"><em>海外酒店</em></a>

                </div>

            </div>

            <div class="row">

                    <div class="col1">

                        <a href="#">

                            <em>酒店</em>

                            <i></i>

                        </a>

                    </div>

                    <div class="col2">

                        <a href="#"><em>特价酒店</em></a>

                        <a href="#"><em>海外酒店</em></a>

                    </div>

                    <div class="col3">

                        <a href="#"><em>特价酒店</em></a>

                        <a href="#"><em>海外酒店</em></a>

                    </div>

                </div>

    </div>

</body>
        html,bidy{

            margin:;

            padding:;

            box-sizing: border-box;/* css3盒子模型 */

        }

        a{

            text-decoration: none;

            color: #fff;

            text-shadow: 10px 0 10px rgba(0,0,0,0.6);/* 文字阴影 */

        }

        .row{

            width: 532px;

            height: 90px;

            margin: 0 auto;

            display: flex;/* 父元素flex布局 */

            overflow: hidden;

            margin-bottom: 2px;

        }

        .row .col1, .row .col2, .row .col3{

            height: 100%;

            margin-right: 3px;

            flex:;

        }

        .row .col1{

            position: relative;

            background: rgb(24, 207, 40);

        }

        .col1 em{

            width: 100%;

            height: 45px;

            line-height: 45px;

            text-align: center;

            font-style: normal;

            display: block;

            position: absolute;

            left:;

            top:;

        }

        .col1 i{

            display: block;

            width: 43px;

            height: 43px;

            position: absolute;

            left: 50%;

            bottom: 10px;

            transform: translateX(-50%);

            background: url(ctrip.png) no-repeat 0 -124px;

            background-size: 104px auto;/* 背景图缩放 */

        }

        .col2 em, .col3 em{

            width: 100%;

            height: 45px;

            line-height: 45px;

            text-align: center;

            font-style: normal;

            display: block;

            background: rgb(223, 12, 12);

            margin-bottom: 2px;

        }

携程移动端案列（flex布局、背景图缩放，文字阴影）的更多相关文章

  1. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  2. vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）

    html中 <div class="flexLayoutr"> <div class="div_head"></div> & ...

  3. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  5. 携程首页--使用flex布局实现

    携程首页 flex解决了float和postion的遗留问题,对移动端比较友好. 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值(比例) 布局时可以先从大的页面 ...

  6. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

  7. 移动端flex布局

    移动端flex布局 弹性盒布局语法分为两部分: 1. 添加在父容器上的语法 (1)display : flex; 设置为弹性盒(父元素添加) (2)flex-direction: 主轴排列方式 row ...

  8. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  9. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

随机推荐

  1. WUSTOJ 1332: Prime Factors（Java）

    题目链接:1332: Prime Factors Description I'll give you a number , please tell me how many different prim ...

  2. 小贴士--java篇

    1. java:  “.”和“|”都是转义字符,必须得加"\\" 2.java :如果在一个字符串中有多个分隔符,可以用“|”作为连字符,比如:“acount=? and uu = ...

  3. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

  4. 1.VBA Excel宏

    Excel VBA宏 在这一章中,让我们了解如何编写一个简单的宏.让我们一步一步来. 第1步:首先,让我们能够在Excel20XX'开发'菜单.做同样的,点击 File >> Option ...

  5. 常用算法之排序(Java)

    一.常用算法(Java实现) 1.选择排序(初级算法) 原理:有N个数据则外循环就遍历N次并进行N次交换.内循环实现将外循环当前的索引i元素与索引大于i的所有元素进行比较找到最小元素索引,然后外循环进 ...

  6. 在论坛中出现的比较难的sql问题：10(删除多表中的同一个外键)

    原文:在论坛中出现的比较难的sql问题:10(删除多表中的同一个外键) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有 ...

  7. robot framework 的关键字Continue For Loop 用法

    Continue For Loop关键字就是python的continue的意思,跳出本层循环,继续执行下一个循环. 我先举个栗子: :FOR    ${index}    IN RANGE    5 ...

  8. 进程间的通信—套接字(socket)

      前面说到的进程间的通信,所通信的进程都是在同一台计算机上的,而使用socket进行通信的进程可以是同一台计算机的进程,也是可以是通过网络连接起来的不同计算机上的进程.通常我们使用socket进行网 ...

  9. S3C2440 块设备（待续）

    1.块设备只能以块为单位接受输入和返回输出,而字符设备则以字节为单位 2.块设备对于I/O请求有对应的缓冲区,因此他们可以选择以什么顺序进行响应,字符设备无须缓冲且被直接读写.对于存储设备而言调整读写 ...

  10. 第二篇：Python基本知识

    这一篇我们简单的介绍一下Python学习的基本知识-->Python文件是如何运行.Python文件打开通常会有两行注释,那么这两行注释是什么:上篇提到的字节码,这些字节码都存储在哪?即pyc文 ...