H5 携程app官网首页用flex布局+css3
战斗中的老段
帮助1人
效果图
详细教程
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;
}
素材
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgeiaee
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
