携程移动端案列（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多列布局实 ...
随机推荐
- Vue.js 2.x API 知识梳理（一） 全局配置
Vue.js 2.x API 知识梳理(一) 全局配置 Vue.config是一个对象,包含Vue的全局配置.可以在启动应用之前修改指定属性. 这里不是指的@vue/cli的vue.config.js ...
- SpringCloud使用Consul作为分布式配置中心
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_36027670/article/de ...
- 关于Windows下的访问控制模型
在探索Windows操作系统的过程中,发现很多有意思 的东西. Windows下的访问控制模型也是我在Github上浏览代码时,无意中发现的. 项目地址 https://github.com/Krut ...
- windows环境下如何搭建Consul+Ocelot
下面的是markdown格式的文档,懒得排版了,有兴趣的话可以去github上看,有源码 Github:https://github.com/yuchengao0721/Consul-Ocelot.g ...
- robot framework 关键字Switch Browser和Select Window的区别
Switch Browser针对的是2个Open Browser以上的切换:Select Window针对的是1个Open Browser里面某个点击事件打开了另外一个新窗口 1.例子 Switch ...
- 本文可能是国内第一篇介绍C/4HANA Foundation的中文博客
SAP C/4HANA从去年发布已经过去了一年多的时间,C/4HANA的从业者,对于这五朵云里包含的产品集,想必都有了一些了解. Jerry注意到,SAP C/4HANA Foundation这个概念 ...
- js 递归获取子节点所有父节点，深度遍历获取第一个子树
前端需求. 递归 深度优先遍历算法 // 查找一个节点的所有父节点 familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...
- Android笔记（三十） Android中线程之间的通信（二）Handler消息传递机制
什么是Handler 之前说过了,Android不允许主线程(MainThread)外的线程(WorkerThread)去修改UI组件,但是又不能把所有的更新UI的操作都放在主线程中去(会造成ANR) ...
- 记录java+testng运行selenium（四）--- 结构说明
一图:主要是driver文件所在目录,及ini配置文件所在位置. 这两个文件一般我是放在其它目录下,不跟随项目所在目录 二图:用例操作类及用例执行类所在位置. 下图中有接口代码及功能代码组成,之前的文 ...
- iveiw DatePicker 只能选择本月之前的日期，本月包括之后都不能选择
日期判断只能选择本月之前的日期 <DatePicker type="date" :options="options3" format="yyyy ...