效果图如下：

<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. linux 列出本文件下的目录

    `ls /etc` 和$(ls /etc) 是两种获取命令执行结果的方式. for file in List 的语法里面的List 就是使用使用ls /etc 的命令执行结果作为List(https: ...

  2. 从其他数据库迁移到MySQL及MySQL特点

    从其他数据库迁移到MySQL Oracle,SQL Server迁移到MySQL 一些变化 不再使用存储过程.视图.定时作业 表结构变更,如采用自增id做主键,以及其他语法变更 业务SQL改造,不使用 ...

  3. Nokia5130不能上网

    说明 我是一个挺怀旧的人,一直想入手一个好几年前买的Nokia5130. 于是昨天在淘宝上买了一个,花了我一百多.不过早就停产了,买到的自然是翻新机. 收到货的时候,看似一切美好,但是下载了个uc的j ...

  4. Python虚拟环境virtualenv的安装与使用详解（转）

    virtualenv参考:https://www.jb51.net/article/114933.htm virtualenvwrapper参考:https://www.jianshu.com/p/7 ...

  5. maven - 多模块构建

    使用idea创建maven项目 点击next输入GroupId和ArtifactId 点击next创建项目,新建项目结构如下 修改demo打包方式为pom 按层级拆分创建模块model,server, ...

  6. VBA While Wend循环

    在While...Wend循环中,如果条件为True,则会执行所有语句,直到遇到Wend关键字. 如果条件为false,则退出循环,然后控件跳转到Wend关键字后面的下一个语句. 语法 以下是VBA中 ...

  7. html+css+javascript网页制作技巧总结1

    (一)div.元素居中中显示方法: 1.宽度要有实际值或百分比值 2.margin:0px auto; 文本内容居中显示的方法: 1.text-align:center; 2.line-height: ...

  8. ubuntu无法安装usb驱动

    第一步: 输入命令 lsusb 箭头指向的就是连接的手机 第二步: 输入命令,新建并打开文件 sudo gedit /etc/udev/rules.d/-android.rules [注意]如果提示没 ...

  9. 网络基础 InetAddress

    IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了 ...

  10. js 递归获取子节点所有父节点，深度遍历获取第一个子树

    前端需求. 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...