携程移动端案列（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多列布局实 ...

随机推荐

vm虚拟机啊安装操作
VMware下载与安装一.虚拟机的下载1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Windo ...
Authorization
授权,也叫访问控制,即在应用中控制谁访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角色 ...
Educational Codeforces Round 64 (Div. 2)
A.3*3讨论即可,注意正方形套圆套三角形只有6个点. #include<cstdio> #include<cstring> #include<iostream> ...
js图片向下流动
<div id=demo style=overflow:hidden;height:;width:;background:#f4f4f4;color:#ffffff><div id= ...
hdu 1242 不用标记数组的深搜
#include<stdio.h>#include<string.h>char mapp[220][220];int m,n,mmin;void dfs(int x,int y ...
js循环修改数组属性key值
var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...
html+css+javascript网页制作技巧总结1
(一)div.元素居中中显示方法: 1.宽度要有实际值或百分比值 2.margin:0px auto; 文本内容居中显示的方法: 1.text-align:center; 2.line-height: ...
Android笔记（三十五） Android中AsyncTask
AsyncTask<Params,Progress,Result> 是一个抽象类,通常继承这个抽象类需要指定如下几个泛型参数: 1. Params :启动任务时出入参数的类型 2. P ...
cmd中for的用法
在cmd窗口输入for /?后的原文,被我自己“翻译”了一下,更像人话了. 推荐去https://www.cnblogs.com/cbugs/p/8992059.html这篇部落格里去看看,讲的更好. ...
Mybatis3.1-[tp-30-31]-select_resultMap_关联查询_级联属性封装结果__association定义关联对象封装规则
笔记要点出错分析与总结在全局配置中,映射dao包下的全部: <mapper> <package name="com.dao"/> </mapper ...

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

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

随机推荐

热门专题