Flex布局思路

方案：单独制作移动页面方案
技术：flex布局、宽度自适应高度固定

html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>携程旅行-酒店预订，机票查询，旅游度假，商旅管理-携程无线官网</title>
</head><body><!-- 技术选型方案：单独制作移动页面方案技术：flex布局宽度自适应 高度固定--><!-- 搜索模块 固定定位 --><img class="baodi2" src="data:images/baodi2@v7.15.jpg"><div class="search_index"><div class="search_text"><span>搜索:目的地/酒店/景点/航班号</span></div><div class="search_my"><a href="#">我 的</a></div></div><!-- 本地导航栏 --><div class="local_nav"><a href="#">攻略·景点</a><a href="#">门票·活动</a><a href="#">美食林</a><a href="#">周边游</a><a href="#">一日游</a></div><!-- 主导航栏 --><nav><div class="hotel"><div><a href="#">酒店</a></div><div><a href="#">民宿·客栈</a></div><div><a href="#">特价·爆款</a></div></div><div class="flight"><div><a href="#">机票</a></div><div><a href="#">火车票</a></div><div><a href="#">汽车·船票</a><a href="#">专车·租车</a></div></div><div class="travel"><div><a href="#">旅游</a></div><div><a href="#">私家团</a></div><div><a href="#">邮轮游</a></div><div><a href="#">定制游</a></div></div></nav><!-- 特殊入口导航 --><div class="subnav_entry"><div><a href="#"><span class="subnav_icon"></span><span>电话卡</span></a></div><div><a href="#"><span class="subnav_icon2"></span><span>WiFi电话卡</span></a></div><div><a href="#"><span class="subnav_icon3"></span><span>保险·签证</span></a></div><div><a href="#"><span class="subnav_icon4"></span><span>换钞·购物</span></a></div><div><a href="#"><span class="subnav_icon5"></span><span>向导·包车</span></a></div><div><a href="#"><span class="subnav_icon6"></span><span>特价机票</span></a></div><div><a href="#"><span class="subnav_icon7"></span><span>礼品卡</span></a></div><div><a href="#"><span class="subnav_icon8"></span><span>申卡·借钱</span></a></div><div><a href="#"><span class="subnav_icon9"></span><span>社区</span></a></div><div><a href="#"><span class="subnav_icon10"></span><span>更多</span></a></div></div><!-- 底部连接 --><footer class="f_link"><div><a href="#"><span class="footer_icon"></span><span>电话预订</span></a></div><div><a href="#"><span class="footer_icon2"></span><span>下载客户端</span></a></div><div><a href="#"><span class="footer_icon3"></span><span>我 的</span></a></div></footer><footer class="tools"><div><a href="#">网站地图</a></div><div><a href="#">Language</a></div><div><a href="#">电脑版</a></div></footer><footer class="slogen"><p>携程旅行｜沪ICP备08023580号</p></footer></body></html>

css

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-color: #fafafc;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}a {text-decoration: none;color: #000;
}.baodi2 {display: block;position: relative;top: 0;left: 0;width: 100%;height: 240px;border-radius: 0 0 10% 10%;
}.search_index {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 100%;min-width: 320px;max-width: 540px;height: 44px;
}.search_text {box-sizing: border-box;background-color: #fff;margin: 8px 5px 0 15px;height: 33px;border-radius: 25px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);flex: 1;
}.search_text span::after {content: "";position: absolute;top: 2px;left: -25px;width: 15px;height: 15px;background: url("../images/home-common.png") no-repeat 0 0;background-size: 20px auto;overflow: hidden;
}.search_text span {position: relative;left: 40px;line-height: 36px;
}.search_my {position: relative;width: 44px;height: 44px;text-align: center;color: #fff;line-height: 72px;
}.search_my a {display: block;width: 44px;height: 44px;text-decoration: none;color: #fff;font-size: .75rem;
}.search_my::after {content: "";position: absolute;top: 7px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 20px;height: 20px;background: url("../images/home-common.png") no-repeat 0 -34px;background-size: 20px auto;overflow: hidden;
}.local_nav {position: relative;top: -30px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);display: flex;width: 95%;height: 64px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}.local_nav a {display: block;position: relative;line-height: 98px;text-align: center;font-size: .5rem;flex: 1;
}.local_nav a:nth-child(1)::before {position: absolute;top: 5px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);content: "";width: 31px;height: 31px;background: url("../images/home-fivemain.png") no-repeat 0 0;background-size: 35px auto;
}.local_nav a:nth-child(2)::before {position: absolute;top: 13px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);content: "";width: 31px;height: 31px;background: url("../images/home-fivemain.png") no-repeat 0 -43px;background-size: 35px auto;
}.local_nav a:nth-child(3)::before {position: absolute;top: 8px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);content: "";width: 31px;height: 31px;background: url("../images/home-fivemain.png") no-repeat 0 -72px;background-size: 35px auto;
}.local_nav a:nth-child(4)::before {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);content: "";width: 31px;height: 31px;background: url("../images/home-fivemain.png") no-repeat 0 -108px;background-size: 35px auto;
}.local_nav a:nth-child(5)::before {position: absolute;top: 10px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);content: "";width: 31px;height: 31px;background: url("../images/home-fivemain.png") no-repeat 0 -142px;background-size: 35px auto;
}nav {position: relative;top: -20px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 95%;
}nav .hotel {display: flex;height: 66px;background: linear-gradient(to right, #fa5956, #fb8650 54%);border-radius: 10px 10px 0 0;
}nav .hotel div a {color: #fff;line-height: 66px;
}nav .hotel div:nth-child(1) {position: relative;flex: 1.3;
}nav .hotel div:nth-child(1)::before {position: absolute;right: 0;bottom: 0;content: "";width: 78px;height: 32px;background: url("../images/grid-nav-items-hotel@v7.15.png") no-repeat 0 0;background-size: 78px auto;
}nav .hotel div:nth-child(1) a {margin-left: 15px;
}nav .hotel div:nth-child(2) {position: relative;border-left: 1px solid #fff;border-right: 1px solid #fff;text-align: center;flex: 1;
}nav .hotel div:nth-child(2)::before {position: absolute;left: 0;bottom: 0;content: "";width: 37px;height: 20px;background: url("../images/grid-nav-items-minsu@v7.15.png") no-repeat 0 0;background-size: 37px auto;
}nav .hotel div:nth-child(3) {position: relative;text-align: center;flex: 2;background: linear-gradient(to right, #ffbc49, #ffd252);z-index: 2;border-radius: 0 10px 0 0;
}nav .hotel div:nth-child(3) a {position: absolute;right: 0;bottom: 0;content: "";width: 100%;height: 66px;background: url(../images/grid-nav-items-hot.png) no-repeat 0 -30px;background-size: 241px auto;border-radius: 0 10px 0 0;color: #000;
}nav .flight {display: flex;height: 66px;background: linear-gradient(to right, #4b8fed, #53bced);border-top: 1px solid #fff;border-bottom: 1px solid #fff;
}nav .flight div a {color: #fff;
}nav .flight div:nth-child(1) {position: relative;line-height: 66px;flex: 1.3;
}nav .flight div:nth-child(1) a {margin-left: 15px;
}nav .flight div:nth-child(1)::before {position: absolute;right: 0;bottom: 0;content: "";width: 78px;height: 34px;background: url("../images/grid-nav-items-flight@v7.15.png") no-repeat 0 0;background-size: 78px auto;
}nav .flight div:nth-child(2) {position: relative;border-left: 1px solid #fff;border-right: 1px solid #fff;text-align: center;line-height: 66px;flex: 1;
}nav .flight div:nth-child(2)::before {position: absolute;left: 0;bottom: 0;content: "";width: 37px;height: 26px;background: url("../images/grid-nav-items-train.png") no-repeat 0 0;background-size: 37px auto;
}nav .flight div:nth-child(3) {display: flex;flex-direction: column;text-align: center;flex: 2;
}nav .flight div:nth-child(3) a:nth-child(1) {flex: 1;display: block;line-height: 33.5px;border-bottom: 1px solid #fff;
}nav .flight div:nth-child(3) a:nth-child(2) {flex: 1;display: block;line-height: 32.5px;
}nav .travel {display: flex;height: 66px;background: linear-gradient(to right, #34c2aa, #6cd557);line-height: 66px;border-radius: 0 0 10px 10px;
}nav .travel div a {color: #fff;
}nav .travel div:nth-child(n+2) {text-align: center;
}nav .travel div:nth-child(1) {position: relative;flex: 1.3;
}nav .travel div:nth-child(1) a {margin-left: 15px;
}nav .travel div:nth-child(1)::before {position: absolute;right: 0;bottom: 0;content: "";width: 93px;height: 48px;background: url("../images/grid-nav-items-travel@v7.15.png") no-repeat 0 0;background-size: 93px auto;
}nav .travel div:nth-child(2) {position: relative;border-left: 1px solid #fff;border-right: 1px solid #fff;flex: 1;
}nav .travel div:nth-child(2)::before {position: absolute;left: 0;bottom: 0;content: "";width: 61px;height: 20px;background: url("../images/grid-nav-items-dingzhi@v7.15.png") no-repeat 0 0;background-size: 61px auto;
}nav .travel div:nth-child(3) {border-right: 1px solid #fff;flex: 1;
}nav .travel div:nth-child(4) {flex: 1;
}.subnav_entry {display: flex;flex-wrap: wrap;position: relative;top: -10px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 95%;height: 110px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}.subnav_entry div {flex: 20%;
}.subnav_entry div a {display: flex;flex-direction: column;align-items: center;
}.subnav_entry div a span[class^="subnav_icon"] {display: block;margin: 6px 0;width: 23px;height: 23px;background: url("../images/un_ico_subnav2x@v7.33.png") no-repeat 0 0;background-size: 23px auto;
}.subnav_entry div a span:nth-child(2) {font-size: .75rem;
}.subnav_entry div a span.subnav_icon2 {background-position: 0 -23px;
}.subnav_entry div a span.subnav_icon3 {background-position: 0 -46px;
}.subnav_entry div a span.subnav_icon4 {background-position: 0 -69px;
}.subnav_entry div a span.subnav_icon5 {background-position: 0 -92px;
}.subnav_entry div a span.subnav_icon6 {background-position: 0 -115px;
}.subnav_entry div a span.subnav_icon7 {background-position: 0 -137px;
}.subnav_entry div a span.subnav_icon8 {background-position: 0 -160px;
}.subnav_entry div a span.subnav_icon9 {background-position: 0 -183px;
}.subnav_entry div a span.subnav_icon10 {background-position: 0 -206px;
}.f_link {display: flex;border-top: 1px solid rgba(0, 0, 0, .2);border-bottom: 1px solid rgba(0, 0, 0, .2);height: 58px;background-color: #fff;
}.f_link div {flex: 1;
}.f_link div a {display: flex;flex-direction: column;align-items: center;font-size: .75rem;
}.f_link div a span[class^="footer_icon"] {margin: 8px 0;width: 18px;height: 18px;background: url("../images/un_ico_home_v620.png") no-repeat -58px -153px;background-size: 104px auto;
}.f_link div a span.footer_icon2 {background-position: -59px -173px;
}.f_link div a span.footer_icon3 {background-position: -59px -310px;
}.tools {position: relative;top: 10px;display: flex;justify-content: center;
}.tools div {font-size: .75rem;
}.tools div:nth-child(2) {position: relative;border-left: 1px solid rgba(0, 0, 0, .4);border-right: 1px solid rgba(0, 0, 0, .4);padding: 0 30px;margin: 0 10px;
}.tools div:nth-child(2)::before {position: absolute;top: 4px;left: 12px;content: "";width: 11px;height: 11px;background: url(../images/un_icon_sites.png) no-repeat 0 -160px;background-size: 30px auto;
}.tools div:nth-child(2)::after {position: absolute;top: 5px;right: 10px;content: "";border: 1px solid #666;border-width: 0 1px 1px 0;width: 5px;height: 5px;-webkit-transform: rotate(45deg);transform: rotate(45deg);vertical-align: 2px;margin: 0 3px;
}.slogen {display: flex;justify-content: center;
}.slogen p {display: inline-block;color: #999;font-size: .75rem;
}

使用Flex布局-实现静态携程网移动端首页相关推荐

Flex布局 - 仿携程网移动端首页案列练习
目录一.搭建相关文件结构 1.1 文件结构 1.2 引入初始化样式 1.3 常用初始化样式二.搜索模块 2.1 搜索模块 - 外观布局 2.2 搜索模块 - 个人中心 2.3 搜索模块 - 搜索框 ...
433~458（flex+携程网移动端首页）
1 flex布局体验 1.1 传统布局与flex布局如果是PC端页面布局,我们还是传统布局. 如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局 1.2 初体验 < ...
HTML+CSS作品展示(仿写携程网移动端首页①)
参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 仿写携程网移动端首页网页如下: ctripH5 总结: 技术 ...
移动WEB开发之 flex布局----携程网移动端首页案例
目录步骤 1. 技术选型 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 4. 常用初始化样式 5.注意细节!!! 6. 常见flex布局思路 7. 背景线性渐变代码部分 HTML ...
【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点,把以前刚学写的小demo放上来,这个页面是自己刚学flex布局写的页面. html部分: <!DOCTYPE html> <html lang=" ...
前端学习之携程网移动端首页制作
今天做一个静态移动端携程网首页,如下图: 目录 1.准备工作 2.搜索模块制作 3.焦点图模块制作 4.local-nav小导航栏制作 5.nav大导航栏制作 6.subnav-entry制作 7.热 ...
rem适配布局制作苏宁移动端首页
实现效果: 可以看到随着我们屏幕尺寸的不断变化,我们制作的移动端页面也能有一个自适应的效果,这就是rem适配布局的好处这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建 1.技术选型 ...
制作携程网移动端首页
1. 技术选型方案: 我们采取单独制作移动页面方案技术: 布局采取flex布局 2. 设置视口标签以及引入初始化样式 <meta name="viewport" conte ...
携程网移动端首页制作（html5+css3）
1.预期完成效果主要是自己做记录,记录做的过程以及遇到的一些问题 2.开始制作 2.1 搜索框的制作 1.首先引入normal.css(Normalize.css: Make browsers re ...

使用Flex布局-实现静态携程网移动端首页

使用Flex布局-实现静态携程网移动端首页

Flex布局思路

html

css

使用Flex布局-实现静态携程网移动端首页相关推荐

最新文章

热门文章