一、整体分析

二、具体样式实现

1、全局样式设置

2、搜索栏

3、游玩导航栏

4、主要功能导航栏

5、便利功能导航栏

6、广告部分

7、页面底部

三、完成效果

四、总结

一、整体分析

这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分

二、具体样式实现

1、全局样式设置

导入normalize.css并设置一下body

2、搜索栏

<div class="short-search"><div class="search"><p>搜索:目的地/酒店/景点/航班号</p></div><div class="user"><span class="user-icon"> </span><span>我 的</span></div></div>

通过fixed定位固定搜索栏，保证导航栏位置始终在页面上方

通过精灵图在css里设置搜索框需要的图标

.search-index {position: fixed;left: 50%;z-index: 12;width: 100%;max-width: 540px;transform: translateX(-50%);padding-left: 12px;box-sizing: border-box;display: flex;/* align-items: center; */
}.search-index .search-index-box {margin-top: 5px;height: 28px;line-height: 24px;padding: 2px 5px;border-radius: 15px;background-color: #fff;color: #666;flex: 1;box-sizing: border-box;position: relative;
}.search-index .search-index-box span {padding-left: 35px;
}.search-index .search-index-box span:after {position: absolute;top: 0;left: 0;width: 35px;height: 100%;overflow: hidden;background: url(../images/home-common-sprite2x@v7.15.png) 15px 7px no-repeat;background-size: 21px auto;content: "";
}.search-index .notice-myctrip {width: 51px;height: 44px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;font-size: .75rem;line-height: 1;box-sizing: border-box;padding-right: 4px;
}.search-index .notice-myctrip:before {content: "";width: 22px;height: 22px;background: url('../images/home-common-sprite2x@v7.15.png') 1px -36px no-repeat;background-size: 21px auto;margin-bottom: 1px;display: block;
}

3、游玩导航栏

这个用精灵图实现就比较简单，先使用display:flex开启flex布局然后设置好一个的li让图片和文字上下排列，接下来就通过background-position修改一下其他图片的位置就可以了。

<!-- two  --><ul class="local-nav"><li><a><span class="icon-local"></span> <span>攻略·景点</span></a></li><li><a><span class="icon-local icon-local-around"></span><span>门票·玩乐</span></a></li><li><a><span class="icon-local icon-local-food"></span><span>美食林</span></a></li><li><a><span class="icon-local icon-local-oneday"></span><span>周边游</span></a></li><li><a><span class="icon-local icon-local-strategy"></span><span>一日游</span></a></li></ul>

css样式

/* two */
.grid-nav .grid-nav-common .grid-nav-items .grid-nav-jhj-text,
.local-nav,
.local-nav li a {position: relative;
}.local-nav {background: #fff;border-radius: 8px;margin: -52px 12px 10px;display: flex;justify-content: center;padding: 4px 0 8px;z-index: 11;box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}.local-nav li {flex: 1;
}li {list-style-type: none;
}.local-nav li a {display: flex;flex-direction: column;align-items: center;font-size: .75rem;line-height: 1;color: #222;
}.local-nav li .icon-local {width: 40px;height: 40px;border-radius: 100%;background-image: url('../images/home-fivemain-sprite2x@v7.15.png');background-repeat: no-repeat;background-size: 40px auto;display: block;
}.local-nav li .icon-local-around {background-position: 0 -40px;
}.local-nav li .icon-local-food {background-position: 0 -80px;
}.local-nav li .icon-local-oneday {background-position: 0 -120px;
}.local-nav li .icon-local-strategy {background-position: 0 -160px;
}

4、主要功能导航栏

这个看着需要设置很多很复杂但是通过flex布局的思路完成其实发现没有那么困难

可以看到他可以分成上中下三个flex布局，每一个内容只不过是颜色和文字有一些变化

那么首先定义上面的布局然后把他复制两遍重新定义一下对应的类，文字修改一下就可以了

最开始没有理解按钮后面的背景，后来发现就是给对应的按钮加一个background-image

<!-- three --><div id="nav" class="nav-entry grid-nav"><div class="grid-nav-common grid-nav-hotel"><a id="c_hotel" class="grid-nav-items grid-nav-items-hotel" href="#"><span>酒店</span></a><a id="c_hotel_inn" class="grid-nav-items grid-nav-items-minsu" href="#"><span>民宿·客栈</span></a><a id="c_package_b" class="grid-nav-items grid-nav-items-jhj" href="#"><span class="grid-nav-jhj"><span class="grid-nav-jhj-text">机票/火车票+酒店<span class="grid-nav-item-tag">方便又便宜</span></span></span></a></div><div class="grid-nav-common grid-nav-flight"><a id="c_flight" class="grid-nav-items grid-nav-items-flight" href="#"><span>机票</span></a><a id="c_train_ticket" class="grid-nav-items grid-nav-items-train" href="#"><span>火车票</span></a><a id="c_bus_ticket" class="grid-nav-items" href="#"><span>汽车·船票</span></a><a id="c_car" class="grid-nav-items" href="#"><span>专车·租车</span></a></div><div class="grid-nav-common grid-nav-travel"><a id="c_vacation" class="grid-nav-items grid-nav-items-travel" href="#"><span>旅游</span></a><a id="c_crh_travel" class="grid-nav-items grid-nav-items-dingzhi" href="#"><span>高铁游</span></a><a id="c_cruise" class="grid-nav-items" href="#"><span>邮轮游</span></a><a id="c_custom" class="grid-nav-items" href="#"><span>定制游</span></a></div></div>

/* three */
.grid-nav {margin: 0 12px 1px;border-radius: 8px;overflow: hidden;
}.grid-nav .grid-nav-common.grid-nav-hotel {background: linear-gradient(to right, #fa5956, #fb8650 54%);
}.grid-nav .grid-nav-common {display: flex;align-content: flex-start;justify-content: flex-start;color: #fff;border-bottom: 1px solid #fff;
}.grid-nav .grid-nav-common .grid-nav-items {border-left: 1px solid #f2f2f2;box-sizing: border-box;color: #fff;padding: 1.6rem 0;display: flex;justify-content: center;background-repeat: no-repeat;background-position: left bottom;font-size: 14px;line-height: 1;width: 23%;
}.grid-nav .grid-nav-common .grid-nav-items span {height: 14px;
}a {text-decoration: none;
}.grid-nav .grid-nav-common .grid-nav-items:first-child {padding-left: 12px;justify-content: flex-start;background-position: right bottom;width: 31%;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-hotel {background-image: url('../images/grid-nav-items-hotel@v7.15.png');background-size: 73px auto;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-minsu {background-image: url('../images/grid-nav-items-minsu@v7.15.png');background-size: 37px auto;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-jhj {flex: 0 1 46%;background: linear-gradient(to right, #ffbc49, #ffd252);padding: 0;width: 47%;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-jhj .grid-nav-jhj {padding: 1.6rem 0;background: url('../images/grid-nav-items-jhj@v7.15.png') right bottom no-repeat;background-size: 86px auto;text-align: center;position: relative;width: 100%;color: #a05416;display: block;
}.grid-nav .grid-nav-common .grid-nav-items .grid-nav-item-tag {color: #fff;font-size: .63rem;background: #f54c45;border-radius: 7px 7px 7px 0;position: absolute;top: -14px;right: 0;padding: 2px 5px;line-height: 1;
}.grid-nav .grid-nav-common.grid-nav-flight {background: linear-gradient(to right, #4b8fed, #53bced);
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-flight {background-image: url('../images/grid-nav-items-flight@v7.15.png');background-size: 79px auto;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-train {background-image: url('../images/grid-nav-items-train.png');background-size: 37px auto;
}.grid-nav .grid-nav-common.grid-nav-travel {background: linear-gradient(to right, #34c2aa, #6cd557);border-bottom: 0;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-travel {background-image: url('../images/grid-nav-items-travel@v7.15.png');background-size: 94px auto;border-bottom-left-radius: 8px;
}.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-dingzhi {background-image: url('../images/grid-nav-items-dingzhi@v7.15.png');background-size: 61px auto;
}

5、便利功能导航栏

这部分的布局使用li20%就可以，相对不是很难，还是通过精灵图实现，在每个导航按钮中使用了 flex 让文字和图片上下排列其他的改变图片的位置就可以，在旅拍按钮上添加一个内容

<!-- fore  --><ul class="subnav-entry"><li><a href="#"><span class="subnav-icon subnav-icon-travel"></span><span>自由行</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-wifi"></span><span>WiFi电话卡</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-insurance"></span><span>保险·签证</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-shopping"></span><span>换钞·购物</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-guide"></span><span>当地向导</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-flight"></span><span>特价机票</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-card"></span><span>礼品卡</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-creditCard"></span><span>申卡·借钱</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-photograph"><span class="subnav-new-tag">NEW</span></span><span>旅拍</span></a></li><li><a href="#"><span class="subnav-icon subnav-icon-more"></span><span>更多</span></a></li></ul>

/* fore  */
.subnav-entry {overflow: hidden;margin: 0 12px 12px;
}body,figure,h1,h2,h3,html,li,nav,p,ul {padding: 0;margin: 0;
}.subnav-entry li {width: 20%;float: left;
}.subnav-entry li a {display: flex;align-items: center;justify-content: center;flex-direction: column;box-sizing: border-box;font-size: .63rem;color: #222;line-height: 1;position: relative;
}.subnav-entry li .subnav-icon {width: 28px;height: 28px;background-image: url('../images/un_ico_subnav2x@v7.152.png');background-size: 28px auto;background-repeat: no-repeat;margin-top: .63rem;margin-bottom: .31rem;display: block;
}.subnav-entry .subnav-icon-travel {background-position: 0 0;
}.subnav-entry .subnav-icon-wifi {background-position: 0 -28px;
}.subnav-entry .subnav-icon-insurance {background-position: 0 -56px;
}.subnav-entry .subnav-icon-shopping {background-position: 0 -84px;
}.subnav-entry .subnav-icon-guide {background-position: 0 -112px;
}.subnav-entry .subnav-icon-flight {background-position: 0 -139px;
}.subnav-entry .subnav-icon-card {background-position: 0 -168px;
}.subnav-entry .subnav-icon-creditCard {background-position: 0 -196px;
}.subnav-entry .subnav-icon-photograph {background-position: 0 -224px;position: relative;
}.subnav-entry .subnav-icon-more {background-position: 0 -252px;
}.subnav-entry li .subnav-new-tag {position: absolute;font-size: 8px;color: #fff;background: linear-gradient(to right, #f94242, #ffa25f);border-radius: 7px;padding: 2px 5px;top: -2px;right: -20px;
}

6、广告部分

分为头部和主体部分。主体部分使用flex布局做，两个为一组，第一排和后两排修改一下，内容是通过图片填充。

<!-- five  --><div class="sales-box sales-huodong" id="js-activity-wrapper"><div class="sales-hd"><h2 class="title title-huodong">热门活动<i class="icon-gg"></i></h2><a class="button-gradient">获取更多福利</a></div><div id="js-activity-list"><div class="sales-bd"><div class="row"><div class="col col-50 js-activity-item-one" id="js-activity-btn1"><div class="img-one"><div class="img-two img1"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div><div class="col col-50 js-activity-item-one" id="js-activity-btn2"><div class="img-one"><div class="img-two img2"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div></div><div class="row"><div class="col col-50 js-activity-item" id="js-activity-btn3"><div class="img-one"><div class="img-three img3"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div><div class="col col-50 js-activity-item" id="js-activity-btn4"><div class="img-one"><div class="img-three img4"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div></div><div class="row"><div class="col col-50 js-activity-item" id="js-activity-btn5"><div class="img-one"><div class="img-three img5"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div><div class="col col-50 js-activity-item" id="js-activity-btn6"><div class="img-one"><div class="img-three img6"></div></div><div class="gg-one"><span class="gg-two">广告</span></div></div></div><div style="display: none;" id="js-activity-btn_more"></div></div></div><div id="js_load_hot" class="loadImg-layer-box" style="display: none;"><i class="i-loading-imgVal"></i></div></div>

7、页面底部

还是通过flex排列一下上下图片和文字css样式

.tool-cn {margin-bottom: 5px;background-color: #fff;overflow: hidden;display: flex;align-items: center;justify-content: center;
}.tool-cn .tool-cn-link {position: relative;flex: 1;color: #333;font-size: 12px;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 10px 0;
}.tool-cn .tool-cn-link svg {width: 20px;height: 20px;margin-bottom: 2px;
}

三、完成效果

四、总结

感觉到使用flex布局确实比较方面，像是以前想要实现一个什么居中对齐，上下排列什么的都要设置半天，去查找和调整，有时还会造成奇怪的bug'，这次确实方便了许多。还有就是理解到了精灵图的便利性，否者一些图片多了不光换起来麻烦还难找，这样调整一下位置就可以了。align-items: center;和 justify-content: center;也很好用，避更便捷有效。还是要在以后的任务中多加练习，好可以熟练的使用。

使用Flex布局实现携程APP首页布局相关推荐

React-Native之仿携程App首页布局
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/72793846 本文出自:[顾林海的博客] 前言本篇介绍React-N ...
Flex布局示例简述-携程App主页布局
Flex布局示例简述-携程App主页布局使用要点无论是块元素,还是内联元素,都可以被指定为flex布局: flex items是任何直接子元素,既可以是块元素,也可以是内联元素: flex ite ...
H5 携程app官网首页用flex布局+css3详细教程
效果图详细教程 1.搭建 H5携程移动端页面 (一) 2.flex布局 H5携程移动端头部搜索框 (二) 3.flex布局 H5携程移动端头部个人中心和图标 (三) 4.flex布局 H5携程移动端 ...
RN开发实践——仿携程App（三）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(二) 实现首页中间的内容栏今天实现首页中间的内容栏,原效果如下: 红框就是今天需要实现的内容这里可以拆解成四个部分,每个部分都是由 ...
干货 | Islands Architecture（孤岛架构）在携程新版首页的实践
作者简介携程前端框架团队,为携程集团各业务线在PC.H5.小程序等各阶段提供优秀的Web解决方案.当前主要专注方向包括:新一代研发模式探索,Rust构建工具链路升级.Serverless应用框架开发 ...
RN开发实践——仿携程App（二）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(一) 实现首页的轮播图 Swiper简介 The best Swiper component for React Native.Swi ...
【案例】京东APP筛选页和携程APP筛选页的异同是什么？为什么？
这是小胖的第138篇文章. 也是小胖2020年100文章的第13篇. 「筛选项, 提高效率,缩短商业化路径.」本文1853字,阅读大概需要5分钟. 作者:小胖编辑:小胖 01 什么是渠道? 在开始 ...
干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
作者简介 Deway,携程资深工程师,iOS客户端开发,热衷于大前端和动态化技术: Frank,携程高级工程师,关注移动端热门技术,安卓客户端开发. 前言随着各种多端技术的蓬勃发展,如今的移动端和前 ...
携程App网络服务通道治理和性能优化
App网络服务的高可靠和低延迟对于无线业务稳定发展至关重要,过去两年来我们一直在持续优化App网络服务的性能,到今年Q2结束时基本完成了App网络服务通道治理和性能优化的阶段性目标,特此撰文总结其中的 ...

使用Flex布局实现携程APP首页布局

一、整体分析

二、具体样式实现

1、全局样式设置

2、搜索栏

3、游玩导航栏

4、主要功能导航栏

5、便利功能导航栏

6、广告部分

7、页面底部

三、完成效果

四、总结

使用Flex布局实现携程APP首页布局相关推荐

最新文章

热门文章