H5 携程app官网首页用flex布局+css3详细教程

效果图

详细教程
1、搭建 H5携程移动端页面（一）
2、flex布局 H5携程移动端头部搜索框（二）
3、flex布局 H5携程移动端头部个人中心和图标（三）
4、flex布局 H5携程移动端头部搜索框（四）
5、flex布局 H5携程移动端局部布局（五）
6、flex布局 H5携程移动端中间布局（六）
7、flex布局 H5携程移动端下边双行布局（七）

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/index.css"><title>携程移动端页面</title>
</head><body><div class="searchBox"><div class="search">搜索:目的地/酒店/景点/航班号</div><a href="" class="user">我的</a></div><div class="focus"><img src="./upload/focus.jpg" alt=""></div><!-- 局部导航栏 --><div class="local-nav"><li><a href="#" title="景点•玩乐"><span class="local-nav-icon-icon1"></span><span>景点•玩乐</span></a></li><li><a href="#" title="周边游"><span class="local-nav-icon-icon2"></span><span>周边游</span></a></li><li><a href="#" title="美食林"><span class="local-nav-icon-icon3"></span><span>美食林</span></a></li><li><a href="#" title="一日游"><span class="local-nav-icon-icon4"></span><span>一日游</span></a></li><li><a href="#" title="当地攻略"><span class="local-nav-icon-icon5"></span><span>当地攻略</span></a></li></div><nav><div class="nav-common"><div class="nav-items"><a href="#" title="酒店">酒店</a></div><div class="nav-items"><a href="#" title="海外酒店">海外酒店</a><a href="#" title="特价酒店">特价酒店</a></div><div class="nav-items"><a href="#" title="团购">团购</a><a href="#" title="民俗•客栈">民俗•客栈</a></div></div><div class="nav-common"><div class="nav-items"><a href="#" title="机票">机票</a></div><div class="nav-items"><a href="#" title="火车票">火车票</a><a href="#" title="特价机票">特价机票</a></div><div class="nav-items"><a href="#" title="汽车票船票">汽车票船票</a><a href="#" title="专车租车">专车租车</a></div></div><div class="nav-common"><div class="nav-items"><a href="#" title="旅游">旅游</a></div><div class="nav-items"><a href="#" title="门票">门票</a><a href="#" title="目的地攻略">目的地攻略</a></div><div class="nav-items"><a href="#" title="邮轮旅行">邮轮旅行</a><a href="#" title="定制旅行">定制旅行</a></div></div></nav><!-- 侧导航栏 --><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-icon"></span><span>WIFI电话卡</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>保险签证</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>外币兑换</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>购物</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>当地向导</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>自由行</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>境外玩乐</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>礼品卡</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>信用卡</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>更多</span></a></li></ul><!-- 销售模块 --><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div></div><!-- 底部 --><div class="sales-bd"><div class="row"><a href="#"><img src="./upload/pic1.jpg" alt=""></a><a href="#"><img src="./upload/pic2.jpg" alt=""></a></div><div class="row"><a href="#"><img src="./upload/pic3.jpg" alt=""></a><a href="#"><img src="./upload/pic4.jpg" alt=""></a></div><div class="row"><a href="#"><img src="./upload/pic5.jpg" alt=""></a><a href="#"><img src="./upload/pic6.jpg" alt=""></a></div></div>
</body></html>

body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei",STXihei, hei;color: #000;background: #f2f2f2;/* 元素的内容区-剪辑 */overflow-x: hidden;/* 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景 */-webkit-tap-highlight-color: transparent;
}
/* 搜索模块 */
.searchBox {display: flex;/* 固定位置   写固定位置必须写宽度与父元素宽度没有关系它以屏幕为准*/position: fixed;/* background-color: pink; */width: 100%;top: 0;height: 44px;/* 限定 最大宽度  最小宽度 */min-width: 320px;max-width: 540px;/* 居中对齐 */left: 50%;/* 兼容性写法  兼容老版本写法   先写这个再写下边哪个 */-webkit-transform: translateX(-50%);/* css3写法 */transform: translateX(-50%);background-color: white;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
}/* 搜索模块右边我的部分 */
/* 全局取消超链接 */
a {text-decoration: none;
}
.search {position: relative;font-size: 12px;color: #666;/* 为啥给25px  因为放大镜是15*15  然后再给他向左10px间距 就变成25了 */padding-left: 25px;/* css 一般height高多少 line-height就给多少 *//* css3 得把边框算进去;  */line-height: 24px;flex: 1;height: 26px;border: 1px solid #ccc;/* 上下间距6  左右10 */margin: 7px 10px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.search::before {content: "";/* 由内元素变成块元素 然后就能设置高了 *//* display: block; *//* 加了绝对定位的盒子就有大小了 ;所以display: block可以省掉 ;用定位,margin就不起效果了 */position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../images/sprite.png) no-repeat -59px -279px;background-size: 104px auto;/* margin: 5px; */
}
.user {width: 44px;height: 44px;/* background-color: purple; */font-size: 12px;color: #2eaae0;text-align: center;
}
/* ::before是一个伪类元素，用于创建一个伪元素，并将其设置为选中元素的第一个子元素，插入到元素的其他内容之前 */
.user::before {/*  */content: "";/* 由内元素变成块元素  父级必须给display:flex */display: block;width: 23px;height: 23px;/* url加载精灵图标   no-repeat图标不重复   -59px -194px 显示图标缩放后的位置 */background: url(../images/sprite.png) no-repeat -59px -194px;/* 缩放图标 104px来源于为原图片宽度208px缩放后的宽度 */background-size: 104px auto;/* 在这里 5px是指图标往下5px   auto是指图标和文字都居中   0 是往上移动 */margin: 5px auto -2px;
}/* 轮播图 */
.focus {padding-top: 44px;
}
.focus img {width: 100%;
}/* <!-- 局部导航栏 --> */
/* 去下小点 */
li {list-style: none;padding: 0;margin: 0;
}
/* 背景样式 */
.local-nav {display: flex;height: 64px;background-color: white;margin: 3px 4px;border-radius: 8px;
}
/* 每个都分成1份 */
.local-nav li {flex: 1;
}
/* 文字和图标的父元素 */
.local-nav a {display: flex;flex-direction: column;align-items: center;color: #222;font-size: 12px;
}
/* .local-nav-icon{width: 32px;height: 32px;background-color: pink;margin-top: 8px;background: url(../images/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;
} *//* class^='local-nav-icon' : 属性选择器    就是前边的前缀名都一样; */
.local-nav li [class^="local-nav-icon"] {width: 32px;height: 32px;background-color: pink;margin-top: 8px;background: url(../images/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;opacity: 0.4;
}
.local-nav li .local-nav-icon-icon2 {background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3 {background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4 {background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5 {background-position: 0 -128px;
}.local-nav li [class^="local-nav-icon"]:hover {opacity: 1;
}
.local-nav a:hover {color: blue;font-size: 16px;
}
/* nav */
nav {/* 溢出隐藏 给一个元素中设置overflow:hidden,    在这里面那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位 *//* 不写这个就不显示圆角 */overflow: hidden;border-radius: 8px;/* 上 左  下  *//* https://www.runoob.com/css/css-margin.html  margin详解 */margin: 0 4px 3px;
}
.nav-common {display: flex;height: 88px;background-color: pink;
}
/* :nth-child(2)   指定每个 nav-common 元素匹配的父元素中第 2 个子元素的上下间距3px： */
.nav-common:nth-child(2) {margin: 3px 0;
}
.nav-items {flex: 1;display: flex;/* 由行变列 */flex-direction: column;
}
.nav-items a {flex: 1;color: #fff;/* 表示行高，用于控制文字间的间距 */line-height: 44px;text-align: center;font-size: 14px;/* 添加一个文字阴影 */text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
/* -n+2 就是前两个   -n+3就是前三个 */
.nav-items:nth-child(-n + 2) {border-right: 2px solid #fff;
}/* 加载模块中间的分开线    nth-child(1)  代表上边那部分 */
.nav-items a:nth-child(1) {/* 从上边开始添加底线  */border-bottom: 3px solid #fff;
}
/* 去掉第一个边框线 */
/* :nth和前边类名中间不能有空格 */
.nav-items:nth-child(1) a {border: 0;background: url(../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}
/* 加背景渐变色 */
.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #fa5a55, #fa994d);
}
.nav-common:nth-child(2) {background: -webkit-linear-gradient(left, #4b90ed, #53bced);
}
.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #34c2a9, #6cd559);
}
/* .nav-items:nth-child(2) a{background: url(../images/vacation.png) no-repeat bottom center;
} *//* subnav-entry  侧导航栏 */.subnav-entry {display: flex;border-radius: 8px;background-color: #fff;margin: 0 4px;flex-wrap: wrap;padding: 5px 0;
}
.subnav-entry li {/* flex可以写百分比也可以写1    %是按照父级来说的 */flex: 20%;
}.subnav-entry a {display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.subnav-entry-icon {width: 28px;height: 28px;background-color: pink;margin-top: 4px;background: url(../images/subnav-bg.png) no-repeat ;background-size: 28px auto;
}/* 销售模块 */
.sales-box{border-top: 1px solid #fff;background-color: #fff;margin: 4px;
}
.sales-hd{position: relative;height: 44px;border-bottom: 1px solid #ccc;
}
.sales-hd h2 {position: relative;/* 缩进段落的第一行-999像素： */text-indent: -999px;/* 多的隐藏 */overflow: hidden;
}
.sales-hd h2::after{position: absolute; top: 8px;left: 20px;content: '';width: 79px;height: 15px;background: url(../images/hot.png) no-repeat 0 -20px;background-size: 79px auto;}
/* 运用到css3渐变  */
.more{position: absolute;right: 5px;top: 0px;background: -webkit-linear-gradient(left,#FF506C,#FF6BC6);border-radius: 15px;/* 能把里边撑开 */padding: 3px 20px 3px 10px;color: #fff;
}
/* 三角运用到2d旋转  */
.more::after{content: '';position: absolute;top: 8.5px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}
/* 父元素 */
.row{display: flex;}
/* 超链接子元素 */
.row a{flex: 1;border-bottom: 1px solid #eee;
}
/* 背景图片 */
.row a img {width: 100%;
}
/* 给第一个添加右边框 */
.row a:nth-child(1){border-right: 1px solid #eee;
}

素材

H5 携程app官网首页用flex布局+css3详细教程相关推荐

携程app服务器未响应,携程网网站和APP客户端无法访问原因恢复时间什么时候？...
携程网网站和APP客户端无法访问原因携程被攻击了,据悉今天早些时候,有网友发现携程网网站和APP内部功能不能正常使用.随后携程官方表示携程部分服务器遭不明攻击.而法制晚报则曝出更惊人的消息.有网友称 ...
网页学习，尝试编写大鹏教育官网首页
最近在学习HTML和CSS,听的是pink老师的课,今天便尝试自己写出大鹏教育官网的首页. 如图是大鹏教育官网首页: 网址:https://www.dapengjiaoyu.cn/ 先说一下写的过程遇 ...
携程App网络服务通道治理和性能优化
App网络服务的高可靠和低延迟对于无线业务稳定发展至关重要,过去两年来我们一直在持续优化App网络服务的性能,到今年Q2结束时基本完成了App网络服务通道治理和性能优化的阶段性目标,特此撰文总结其中的 ...
携程App网络服务通道治理和性能优化@2016
App网络服务的高可靠和低延迟对于无线业务稳定发展至关重要,过去两年来我们一直在持续优化App网络服务的性能,到今年Q2结束时基本完成了App网络服务通道治理和性能优化的阶段性目标,特此撰文总结其中的 ...
携程去哪儿网合并：背后的技术力量回顾
2015年10月26日,携程宣布与百度达成股权置换交易,通过股权交换的方式来完成去哪儿网与携程的合并.交易完成后,百度将拥有携程普通股可代表约25%的携程总投票权,携程将拥有约45%的去哪儿总投票权. ...
干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
作者简介 Deway,携程资深工程师,iOS客户端开发,热衷于大前端和动态化技术: Frank,携程高级工程师,关注移动端热门技术,安卓客户端开发. 前言随着各种多端技术的蓬勃发展,如今的移动端和前 ...
Flex布局示例简述-携程App主页布局
Flex布局示例简述-携程App主页布局使用要点无论是块元素,还是内联元素,都可以被指定为flex布局: flex items是任何直接子元素,既可以是块元素,也可以是内联元素: flex ite ...
【案例】京东APP筛选页和携程APP筛选页的异同是什么？为什么？
这是小胖的第138篇文章. 也是小胖2020年100文章的第13篇. 「筛选项, 提高效率,缩短商业化路径.」本文1853字,阅读大概需要5分钟. 作者:小胖编辑:小胖 01 什么是渠道? 在开始 ...
RN开发实践——仿携程App（二）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(一) 实现首页的轮播图 Swiper简介 The best Swiper component for React Native.Swi ...

H5 携程app官网首页用flex布局+css3详细教程

H5 携程app官网首页用flex布局+css3详细教程相关推荐

最新文章

热门文章