携程移动端案列（flex布局、背景图缩放，文字阴影）

效果图如下：

<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布局、背景图缩放，文字阴影）的更多相关文章

在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）
html中 <div class="flexLayoutr"> <div class="div_head"></div> & ...
谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
携程首页--使用flex布局实现
携程首页 flex解决了float和postion的遗留问题,对移动端比较友好. 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值(比例) 布局时可以先从大的页面 ...
【Taro】363- 玩转 Taro 跨端之 flex 布局篇
Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...
移动端flex布局
移动端flex布局弹性盒布局语法分为两部分: 1. 添加在父容器上的语法 (1)display : flex; 设置为弹性盒(父元素添加) (2)flex-direction: 主轴排列方式 row ...
【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
详解纯css实现瀑布流（multi-column多列及flex布局）
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

随机推荐

jdk8新特性--函数式接口的使用
函数式接口的概念: 函数式接口的格式: 示例: 函数式接口的使用: 简化lambda表达式:
游记-NOI2019
Day -18 被各路julao们轮番吊打-- Day -12 鸽子F发布了笔试题库,然而并没有 "MLE全场记零分" 的操作 Day -8 广二体育馆机器装配完毕,误闯开幕式表演 ...
Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)
更新: 2019-11-24 dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...
怎样通过正则匹配IP地址
Ipv4的地址是0.0.0.0 到 255.255.255.255, 匹配这个字段需要判断三种情况: 1. 如果第一位是0或1, 则第二位和第三位可以是0-9的任意数值: [01]\d\d 2. 如果 ...
hdu 5432
Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...
java -jar 参数前后位置说明
springboot项目启动的时候可以直接使用java -jar xxx.jar这样.下面说说参数的一些讲究 1.-DpropName=propValue的形式携带,要放在-jar参数前面 eg:ja ...
WinForm 无焦点获取键盘输入
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
Spring/Spring Boot整合Weblogic JMS实战
本文主要介绍weblogic jms的配置,包括JMS 服务器和JMS 模块(连接工厂.队列.远程 SAF 上下文.SAF 导入目的地.SAF 错误处理)的配置:并在Spring/Spring Boo ...
节日营销！这样搞-App运营日常
节日送礼需求日益增长,当儿女们有了购买需求的时候,商家如何突出重围,成为孝子们的首选?如何做好节日营销?几个经验分享一下: 1.抓住节日特色结合节日风格特色,营造节日气氛,如母亲节这种节日,主要体现 ...
关于 table 那些事儿
一. table thead/tbody/tfoot 组合写法: table: 表格: thead: 表头: tbody: 标签表格主体(正文): tr:行: th:表头单元格 td:单元格: tb ...

携程移动端案列（flex布局、背景图缩放，文字阴影）

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

随机推荐

热门专题