携程移动端案列（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多列布局实 ...
随机推荐
- FFmpeg中AVFrame.linesize的含义
在第一节FFmpeg开发教程一.FFmpeg 版 Hello world中遇到一个问题,在保存YUV的时候,粗暴的使用: fwrite(buf, 1, xsize * ysize, f); 方式去拷贝 ...
- nginx与php配置用户问题
当配置nginx的nginx.conf 时,可参照如下配置: server { listen 80; server_name www.advancephp2017.com; access_log lo ...
- 米联客 osrc_virtual_machine_sdx2017_4 虚拟机的使用
今天大部分时间都在高csdn的博客的,一直无法和word关联,来不及写使用教程了,先发下载链接. 虚拟机安装的是ubuntu16.4.3,vivado软件是SDX2017.4版本,包括的vivado2 ...
- Ajax跨越请求失败,解决
跨越请求 1.1什么是跨域(两个不同系统之间的访问.调用) (1)域名不同,即两个不同的应用. (2)域名相同,但是端口不同,即同一个应用中的不同子系统. 1.2 Ajax跨域请求的缺陷 (1)创建t ...
- React 脚手架支持Typescript和Sass
首先,创建React工程目录,以及选择Typescript版本 进入在my-app目录,安装node-sass 然后再安装webpack的sass-loader 接下来进入node_modules ...
- 手写DAO框架（五）-DAO层实现
-------前篇:手写DAO框架(四)-SQL执行--------- 前言 通过上一篇,可以通过传入sql和对应的参数,可以执行sql并返回结果.但是对于一个DAO框架来说,要尽量的面向对象编程,也 ...
- LInux设置tomcat端口为80
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" ...
- 九、分组查询详解（group by & having）
本篇内容 分组查询语法 聚合函数 单字段分组 多字段分组 分组前筛选数据 分组后筛选数据 where和having的区别 分组后排序 where & group by & having ...
- django_rest framework 接口开发（一）
1 restful 规范(建议) 基于FbV def order(request): if request.method=="GET": return HttpResponse(' ...
- Android笔记（十八） 下拉列表（Spinner）
App中常用的控件——下拉列表(Spinner),提供特定选择供用户选择 Spinner每次只能选择一个部件,它的选项来自于与之相关联的适配器(apater)中. MainActivity.java ...