携程移动端案列（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多列布局实 ...
随机推荐
- TZOJ1299: 畅通工程
#include<stdio.h> #include<math.h> #include<string.h> #include<algorithm> #i ...
- Rubost PCA 优化
Rubost PCA 优化 2017-09-03 13:08:08 YongqiangGao 阅读数 2284更多 分类专栏: 背景建模 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...
- 在论坛中出现的比较难的sql问题：14(存储过程问题 存储过程参数、存储过程内的参数)
原文:在论坛中出现的比较难的sql问题:14(存储过程问题 存储过程参数.存储过程内的参数) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的 ...
- PCA(Principal Component Analysis)笔记
PCA是机器学习中recognition中的传统方法,今天下午遇到了,梳理记一下 提出背景: 二维空间里,2个相近的样本,有更大概率具有相同的属性,但是在高维空间里,由于样本在高维空间里,呈现越来越稀 ...
- 利用python爬取王者荣耀英雄皮肤图片
前两天看到同学用python爬下来LOL的皮肤图片,感觉挺有趣的,我也想试试,于是决定来爬一爬王者荣耀的英雄和皮肤图片. 首先,我们找到王者的官网http://pvp.qq.com/web201605 ...
- iOS - 性能优化：Instruments使用简介
最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instruments使用技巧 关于Instruments官方有一个很有 ...
- ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...
- iOS开发 CGAffineTransform 让图片旋转, 旋转后获得图片旋转的角度
1.让图片旋转 UIImageView *imageView = [[UIImageView alloc]init]; imageView.frame = CGRectMake(50, 50, 200 ...
- linux文件比较
Linux文件比较指令有两个,comm和diff,其中comm要求的是排序过得文件.Diff则没有这个要求,diff的输出结果主要是用来表明文件一经过怎样的修改可以得到文件二. Comm Comm的语 ...
- Idea设置和查看
1.查看激活码有效期 Help->Register