携程移动端案列（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多列布局实 ...
随机推荐
- python装饰器无参及有参案例
装饰器无参和有参案例:
- 关于window.location.hash的理解及其应用（转）
原文1:https://blog.csdn.net/zhuchuji/article/details/50736360 原文2(window.location.href和window.location ...
- hdu 2822 ~！！！！！！坑死我
首先 在此哀悼... 为我逝去的时间哀悼... 每一步都确定再去写下一步吧...日狗 不过还是有点收获的.. 对优先队列的使用 有了进一步的理解 先上代码 #include<iostrea ...
- Saas软件更新以及小程序更新的教训
Saas软件即使版本更新多次,也要兼顾老客户,兼容旧功能. 对于小程序调用的接口,无法保证客户会更新小程序,因此需要兼容使用旧版本小程序的客户,更不能删除接口.
- Vue.js 教程 -- 实例讲解
一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...
- S3C2440 gpio + main
相关文章:http://blog.csdn.net/zhangxuechao_/article/details/77990854 举例 start.S .globl _start _start: /* ...
- python selenium测试用例断言
1.if ...else ...判断进行断言 #coding=utf-8 from time import * from selenium import webdriver "): driv ...
- java - day013 - 流, FileInputStream, BufferedInputStream,
流 Stream 把数据的读写,抽象成数据在管道中流动. 流是单向的 输入流, 只能用来读取数据 输出流, 只能用来输出数据 流只能顺序读写数据 流只能一次性从头到尾读写数据 流动过的数据,不能反复流 ...
- STM32定时器配置（TIM1、TIM2、TIM3、TIM4、TIM5、TIM8）高级定时器+普通定时器，定时计数模式下总结
文章结构: ——> 一.定时器基本介绍 ——> 二.普通定时器详细介绍TIM2-TIM5 ——> 三.定时器代码实例 一.定时器基本介绍 之前有用过野火的学习板上面讲解很详细,所以 ...
- PAT基础级-钻石段位样卷2-7-4 6翻了 (15 分)
“666”是一种网络用语,大概是表示某人很厉害.我们很佩服的意思.最近又衍生出另一个数字“9”,意思是“6翻了”,实在太厉害的意思.如果你以为这就是厉害的最高境界,那就错啦 —— 目前的最高境界是数字 ...