目录
一、搭建相关文件结构
1.1 文件结构
1.2 引入初始化样式
1.3 常用初始化样式
二、搜索模块
2.1 搜索模块 - 外观布局
2.2搜索模块 - 个人中心
2.3 搜索模块 - 搜索框
三、Banner模块
四、局部导航栏模块
4.1局部导航栏模块 - 整体外观布局
4.2 局部导航栏模块 - 内容
五、主导航栏
5.1主导航栏模块 - 整体外观布局
5.2主导航栏模块 - 内容填充
六、底部导航栏模块
七、 销售模块
7.1销售模块头部 - 热门活动
7.2销售模块 - 内容部分
八、底部工具栏模块
九、整体代码
9.1 index.html
9.2 index.css
一、搭建相关文件结构
1.1 文件结构
创建相关存储文件夹以及搭建index.html文件结构
<!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"><title>Document</title></head><body></body></html>
1.2 引入初始化样式
引入index.css样式文件，自己搭建用来渲染index.html的css样式文件
引入normalize.css样式文件，Normalize.css让不同浏览器在渲染网页元素的形式上更加统一，移动端初始化css。Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。
normalize.css文件官方地址：Normalize.css: Make browsers render all elements more consistently.http://necolas.github.io/normalize.css/注意：引入相关css顺序
<link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
1.3 常用初始化样式
在index.css文件内为body标签设置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: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;height: 2000px;}
二、搜索模块
2.1 搜索模块 - 外观布局
在index.css文件内为搜索模块设置固定定位以及宽度。其中固定定位与父级无关系，以当前浏览器的屏幕为准。
<div class="search-index"><div class="search-content"></div><a href="#" class="user">我 的</a></div>
/* 搜索模块 */.search-index{display: flex;position: fixed;top: 0;/* 固定盒子居中显示 */left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 因为采用固定定位，应为固定盒子设置宽度 */width: 100%;min-width: 320px;max-width: 540px;height: 44px;}
也可不设置left和transform，固定盒子也可以居中显示，但提倡案例内的写法。-webkit-transform设置则是为了兼容老版本浏览器。
页面效果展示 - 搜索模块基本外观布局
2.2搜索模块 - 个人中心
搜索栏为自适应的，个人中心为固定大小
（1）首先为父项search-index设置display: flex
display: flex;
（2）将子项分为左右两部分，以及去掉超链接样式
a {/* 超链接去掉下划线 */text-decoration: none;}.search-content{flex: 1;}
（3）个人中心内容以及css样式
.user{width: 44px;height: 44px;font-size: 12px;text-align: center;color: #2eaae0;}/* before伪元素 */.user::before{/* 不能省略content，content默认值为normal，如果content值设置为none则不会生成为伪元素 */content: "";display: block;width: 23px;height: 23px;/* 精灵图缩放为2倍图 -59px和-194px为图内个人中心图标缩放后的坐标*//* 可使用Fireworks */background: url(../img/sprite.png) no-repeat -59px -194px;/* 缩放图标 104px来源于为原图片宽度208px缩放后的宽度*/background-size: 104px auto;margin: 4px auto -2px;}
页面效果展示 - 个人中心部分
2.3 搜索模块 - 搜索框
（1）搜索框内容以及css样式
搜索框内容
<div class="search-content">搜索:目的地/酒店/景点/航班号</div>
css样式
.search-content{position: relative;height: 26px;line-height: 24px;border: 1px solid #ccc;margin: 7px 10px;border-radius: 5px;font-size: 12px;color: #666;padding-left: 25px;box-shadow: 0 2px 4px rgba(0,0,0,.2);flex: 1;}.search-content::before{content: "";/* 采用绝对定位，可以使用行内块元素 display: inline-block;*/position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../img/sprite.png) no-repeat -59px -279px;background-size: 104px auto;}
为整体搜索模块.search-index添加上背景颜色和边框
background-color: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
页面效果展示 - 搜索模块
三、Banner模块
banner内容
<!-- banner模块 --><div class="banner"><img src="upload/focus.jpg" alt=""></div>
css样式
.banner{padding-top: 44px;}.banner img{width: 100%;}
页面效果展示
四、局部导航栏模块
4.1局部导航栏模块 - 整体外观布局
导航栏内容
<!-- 局部导航栏模块 --><ul class="top-nav"><li><a href="#">景点玩乐</a></li><li><a href="#">周边游</a></li><li><a href="#">美食林</a></li><li><a href="#">一日游</a></li><li><a href="#">当地攻略</a></li></ul>
局部导航栏整体外观css样式
ul{list-style: none;margin: 0;padding: 0;}.top-nav{height: 64px;background-color: white;margin: 3px 4px;border-radius: 8px;display: flex;}.top-nav li{flex: 1;}
页面效果展示 - 局部导航栏整体外观布局
4.2 局部导航栏模块 - 内容
为超链接添加局部导航栏图标，超链接内采用flex布局，以y轴为主轴，文字与图片居中显示
<!-- 局部导航栏模块 --><ul class="top-nav"><li><a href="#" title="景点·玩乐"><span class="top-nav-icon-img1"></span><span>景点·玩乐</span></a></li><li><a href="#"><span class="top-nav-icon-img2" title="周边游"></span><span>周边游</span></a></li><li><a href="#"><span class="top-nav-icon-img3" title="美食林"></span><span>美食林</span></a></li><li><a href="#"><span class="top-nav-icon-img4" title="一日游"></span><span>一日游</span></a></li><li><a href="#"><span class="top-nav-icon-img5" title="当地攻略"></span><span>当地攻略</span></a></li></ul>
css样式
.top-nav a{display: flex;flex-direction: column;/* 单行，采用align-items,侧轴居中对齐 */align-items: center;font-size: 12px;}/* 属性选择器 */.top-nav li [class^="top-nav-icon"]{width: 32px;height: 32px;margin-top: 8px;background: url(../img/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;}.top-nav li .top-nav-icon-img2{background-position: 0 -32px;}.top-nav li .top-nav-icon-img3{background-position: 0 -64px;}.top-nav li .top-nav-icon-img4{background-position: 0 -96px;}.top-nav li .top-nav-icon-img5{background-position: 0 -128px;}
页面效果展示 - 局部导航栏
五、主导航栏
5.1主导航栏模块 - 整体外观布局
<!-- 主导航栏 --><nav><div class="nav-common"><div class="nav-items"></div><div class="nav-items"><a href="#" title="海外酒店">海外酒店</a><a href="#" title="特价酒店">特价酒店</a></div><div class="nav-items"></div></div><div class="nav-common"><div class="nav-items"></div><div class="nav-items"></div><div class="nav-items"></div></div><div class="nav-common"><div class="nav-items"></div><div class="nav-items"></div><div class="nav-items"></div></div></nav>
先将整个导航栏分为3个大部分，再将单个大部分内部为3小部分
主导航栏整体外观布局css样式，采用flex布局，先设置背景色更好分辨效果
nav{border-radius: 8px;margin: 0 4px 3px;overflow: hidden;}.nav-common{height: 88px;background-color: skyblue;display: flex;}.nav-common:nth-child(2){margin: 3px 0;}.nav-items{flex: 1;display: flex;flex-direction: column;}/* -n+2选择前两个元素 */.nav-items:nth-child(-n+2){border-right: 1px solid #fff;}.nav-items a{flex: 1;text-align: center;line-height: 44px;color: #fff;font-size: 14px;text-shadow: 1px 1px rgba(0,0,0,.2);}.nav-items a:nth-child(1){border-bottom: 1px solid #fff;}
页面效果展示 -主导航栏模块整体外观布局
5.2主导航栏模块 - 内容填充
为其余空白超链接添加内容以及图标，背景颜色设置为线性渐变
<!-- 主导航栏 --><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>
主导航栏添加图标以及设置线性渐变背景色css样式
.nav-items:nth-child(1) a{border: 0;background: url(../img/hotel.png) no-repeat bottom center;background-size: 121px auto;}nav div:nth-child(2) .nav-items:nth-child(1) a{background: url(../img/ticket.png) no-repeat bottom center;background-size: 121px auto;}nav div:nth-child(3) .nav-items:nth-child(1) a{background: url(../img/places.png) no-repeat bottom center;background-size: 121px auto;}/* 背景线性线性渐变 background: -webkit-linear-gradient(起始方向,颜色1,颜色二)*/.nav-common:nth-child(1){background: -webkit-linear-gradient(left,#FA5A55,#FA994D);}.nav-common:nth-child(2){background: -webkit-linear-gradient(left,#1B90ED,#53BCED);}.nav-common:nth-child(3){background: -webkit-linear-gradient(left,#34C2A9,#6CD559);}
页面效果展示 - 主导航栏
六、底部导航栏模块
与局部导航栏类似
底部导航栏内容
<!-- 底部导航栏 --><ul class="bot-nav"><li><a href="#"><span class="bot-nav-icon-img1"></span><span title="WiFi电话卡">WiFi电话卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img2"></span><span title="保险·签证">保险·签证</span></a></li><li><a href="#"><span class="bot-nav-icon-img3"></span><span title="外币兑换">外币兑换</span></a></li><li><a href="#"><span class="bot-nav-icon-img4"></span><span title="购物">购物</span></a></li><li><a href="#"><span class="bot-nav-icon-img5"></span><span title="当地向导">当地向导</span></a></li><li><a href="#"><span class="bot-nav-icon-img6"></span><span title="自由行">自由行</span></a></li><li><a href="#"><span class="bot-nav-icon-img7"></span><span title="境外玩乐">境外玩乐</span></a></li><li><a href="#"><span class="bot-nav-icon-img8"></span><span title="礼品卡">礼品卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img9"></span><span title="信用卡">信用卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img10"></span><span title="更多">更多</span></a></li></ul>
底部导航栏css样式
/* 底部导航栏 */.bot-nav{border-radius: 8px;background-color: #fff;margin: 0 4px;display: flex;flex-wrap: wrap;box-shadow: 1px 1px rgba(0,0,0,.2);}.bot-nav li{flex: 20%;}.bot-nav a{display: flex;flex-direction: column;align-items: center;}.bot-nav li [class^="bot-nav-icon"]{width: 24px;height: 24px;margin-top: 4px;background: url(../img/subnav-bg.png) no-repeat 0 0;background-size: 24px auto;}.bot-nav li .bot-nav-icon-img2{background-position: 0 -25px;}.bot-nav li .bot-nav-icon-img3{background-position: 0 -51px;}.bot-nav li .bot-nav-icon-img4{background-position: 0 -276px;}.bot-nav li .bot-nav-icon-img5{background-position: 0 -86px;}.bot-nav li .bot-nav-icon-img6{background-position: 0 -141px;}.bot-nav li .bot-nav-icon-img7{background-position: 0px -171px;}.bot-nav li .bot-nav-icon-img8{background-position: 0 -115px;}.bot-nav li .bot-nav-icon-img9{background-position: 0 -200px;}.bot-nav li .bot-nav-icon-img10{background-position: 0 -249px;}
页面效果展示 - 底部导航栏
七、 销售模块
7.1销售模块头部 - 热门活动
<!-- 销售模块 --><div class="sale-box"><div class="sale-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div></div>
销售模块头部 - 热门活动css样式
/* 销售模块 */.sale-box{border-top: 1px solid #ccc;background-color: #fff;margin: 4px;}.sale-hd{height: 44px;border-bottom: 1px solid #ccc;position: relative;}.sale-hd h2{position: relative;text-indent: -999px;overflow: hidden;}.sale-hd h2::after{position: absolute;top: 8px;left: 20px;content: "";width: 79px;height: 20px;background: url(../img/hot.png) no-repeat 0 -20px;background-size: 79px auto;}.more{position: absolute;top: 0px;right: 5px;background: -webkit-linear-gradient(left,#ff506a,#ff6bc4);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;}.more::after{content: "";position: absolute;top: 9px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);}
页面效果展示 -销售模块热门活动部分
7.2销售模块 - 内容部分
<div class="sale-content"><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>
销售模块内容部分css样式
.row{display: flex;}.row a{flex: 1;border-bottom: 1px solid #eee;}.row a:nth-child(1){border-right: 1px solid #eee;}.row a img{width: 100%;}
页面效果展示 -销售模块内容部分
八、底部工具栏模块
<!-- 底部工具栏模块 --><ul class="tool-box"><li><a href="#"><span class="tool-icon-img1"></span><span>电话预定</span></a></li><li><a href="#"><span class="tool-icon-img2"></span><span>下载客户端</span></a></li><li><a href="#"><span class="tool-icon-img3"></span><span>我的</span></a></li></ul>
底部工具栏模块css样式
/* 底部工具栏模块 */.tool-box{display: flex;height: 60px;background-color: #fff;border-top: 1px solid #c2c2c2;border-bottom: 1px solid #c2c2c2;}.tool-box li{flex: 1;}.tool-box a{display: flex;flex-direction: column;align-items: center;font-size: 12px;}.tool-box li [class^="tool-icon"]{width: 20px;height: 20px;margin-top: 8px;background: url(../img/sprite.png) no-repeat -58px -152px;background-size: 104px auto;}.tool-box li .tool-icon-img2{background-position: -58px -172px;}.tool-box li .tool-icon-img3{background-position: -58px -309px;}
页面效果展示 -底部工具栏
九、整体代码
9.1 index.html
<!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="search-index"><div class="search-content">搜索:目的地/酒店/景点/航班号</div><a href="#" class="user">我 的</a></div><!-- banner模块 --><div class="banner"><img src="upload/focus.jpg" alt=""></div><!-- 局部导航栏模块 --><ul class="top-nav"><li><a href="#" title="景点·玩乐"><span class="top-nav-icon-img1"></span><span>景点·玩乐</span></a></li><li><a href="#"><span class="top-nav-icon-img2" title="周边游"></span><span>周边游</span></a></li><li><a href="#"><span class="top-nav-icon-img3" title="美食林"></span><span>美食林</span></a></li><li><a href="#"><span class="top-nav-icon-img4" title="一日游"></span><span>一日游</span></a></li><li><a href="#"><span class="top-nav-icon-img5" title="当地攻略"></span><span>当地攻略</span></a></li></ul><!-- 主导航栏 --><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="bot-nav"><li><a href="#"><span class="bot-nav-icon-img1"></span><span title="WiFi电话卡">WiFi电话卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img2"></span><span title="保险·签证">保险·签证</span></a></li><li><a href="#"><span class="bot-nav-icon-img3"></span><span title="外币兑换">外币兑换</span></a></li><li><a href="#"><span class="bot-nav-icon-img4"></span><span title="购物">购物</span></a></li><li><a href="#"><span class="bot-nav-icon-img5"></span><span title="当地向导">当地向导</span></a></li><li><a href="#"><span class="bot-nav-icon-img6"></span><span title="自由行">自由行</span></a></li><li><a href="#"><span class="bot-nav-icon-img7"></span><span title="境外玩乐">境外玩乐</span></a></li><li><a href="#"><span class="bot-nav-icon-img8"></span><span title="礼品卡">礼品卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img9"></span><span title="信用卡">信用卡</span></a></li><li><a href="#"><span class="bot-nav-icon-img10"></span><span title="更多">更多</span></a></li></ul><!-- 销售模块 --><div class="sale-box"><div class="sale-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="sale-content"><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></div><!-- 底部工具栏模块 --><ul class="tool-box"><li><a href="#"><span class="tool-icon-img1"></span><span>电话预定</span></a></li><li><a href="#"><span class="tool-icon-img2"></span><span>下载客户端</span></a></li><li><a href="#"><span class="tool-icon-img3"></span><span>我的</span></a></li></ul><!-- 备注 --><p class="note">仅个人展示用，无任何商业价值</p></body></html>
9.2 index.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: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;height: 2000px;}a {/* 超链接去掉下划线 */text-decoration: none;color: #222;}ul{list-style: none;margin: 0;padding: 0;}/* 搜索模块 */.search-index{display: flex;position: fixed;top: 0;/* 固定盒子居中显示 */left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 因为采用固定定位，应为固定盒子设置宽度 */width: 100%;min-width: 320px;max-width: 540px;height: 44px;background-color: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}.search-content{position: relative;height: 26px;line-height: 24px;border: 1px solid #ccc;margin: 7px 10px;border-radius: 5px;font-size: 12px;color: #666;padding-left: 25px;box-shadow: 0 2px 4px rgba(0,0,0,.2);flex: 1;}.search-content::before{content: "";/* 采用绝对定位，可以使用行内块元素 display: inline-block;*/position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../img/sprite.png) no-repeat -59px -279px;background-size: 104px auto;}.user{width: 44px;height: 44px;font-size: 12px;text-align: center;color: #2eaae0;}/* before伪元素 */.user::before{/* 不能省略content，content默认值为normal，如果content值设置为none则不会生成为伪元素 */content: "";display: block;width: 23px;height: 23px;/* 精灵图缩放为2倍图 -59px和-194px为图内个人中心图标缩放后的坐标*//* 可使用Fireworks */background: url(../img/sprite.png) no-repeat -59px -194px;/* 缩放图标 104px来源于为原图片宽度208px缩放后的宽度*/background-size: 104px auto;margin: 4px auto -2px;}.banner{padding-top: 44px;}.banner img{width: 100%;}.top-nav{height: 64px;background-color: white;margin: 3px 4px;border-radius: 8px;display: flex;}.top-nav li{flex: 1;}.top-nav a{display: flex;flex-direction: column;/* 单行，采用align-items,侧轴居中对齐 */align-items: center;font-size: 12px;}/* 属性选择器 */.top-nav li [class^="top-nav-icon"]{width: 32px;height: 32px;margin-top: 8px;background: url(../img/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;}.top-nav li .top-nav-icon-img2{background-position: 0 -32px;}.top-nav li .top-nav-icon-img3{background-position: 0 -64px;}.top-nav li .top-nav-icon-img4{background-position: 0 -96px;}.top-nav li .top-nav-icon-img5{background-position: 0 -128px;}/* 主导航栏 */nav{border-radius: 8px;margin: 0 4px 3px;overflow: hidden;}.nav-common{height: 88px;/* background-color: skyblue; */display: flex;}.nav-common:nth-child(2){margin: 3px 0;}.nav-items{flex: 1;display: flex;flex-direction: column;}/* -n+2选择前两个元素 */.nav-items:nth-child(-n+2){border-right: 1px solid #fff;}.nav-items a{flex: 1;text-align: center;line-height: 44px;color: #fff;font-size: 14px;text-shadow: 1px 1px rgba(0,0,0,.2);}.nav-items a:nth-child(1){border-bottom: 1px solid #fff;}.nav-items:nth-child(1) a{border: 0;background: url(../img/hotel.png) no-repeat bottom center;background-size: 121px auto;}nav div:nth-child(2) .nav-items:nth-child(1) a{background: url(../img/ticket.png) no-repeat bottom center;background-size: 121px auto;}nav div:nth-child(3) .nav-items:nth-child(1) a{background: url(../img/places.png) no-repeat bottom center;background-size: 121px auto;}/* 背景线性线性渐变 background: -webkit-linear-gradient(起始方向,颜色1,颜色二)*/.nav-common:nth-child(1){background: -webkit-linear-gradient(left,#FA5A55,#FA994D);}.nav-common:nth-child(2){background: -webkit-linear-gradient(left,#1B90ED,#53BCED);}.nav-common:nth-child(3){background: -webkit-linear-gradient(left,#34C2A9,#6CD559);}/* 底部导航栏 */.bot-nav{border-radius: 8px;background-color: #fff;margin: 0 4px;display: flex;flex-wrap: wrap;box-shadow: 1px 1px rgba(0,0,0,.2);}.bot-nav li{flex: 20%;}.bot-nav a{display: flex;flex-direction: column;align-items: center;}.bot-nav li [class^="bot-nav-icon"]{width: 24px;height: 24px;margin-top: 4px;background: url(../img/subnav-bg.png) no-repeat 0 0;background-size: 24px auto;}.bot-nav li .bot-nav-icon-img2{background-position: 0 -25px;}.bot-nav li .bot-nav-icon-img3{background-position: 0 -51px;}.bot-nav li .bot-nav-icon-img4{background-position: 0 -276px;}.bot-nav li .bot-nav-icon-img5{background-position: 0 -86px;}.bot-nav li .bot-nav-icon-img6{background-position: 0 -141px;}.bot-nav li .bot-nav-icon-img7{background-position: 0px -171px;}.bot-nav li .bot-nav-icon-img8{background-position: 0 -115px;}.bot-nav li .bot-nav-icon-img9{background-position: 0 -200px;}.bot-nav li .bot-nav-icon-img10{background-position: 0 -249px;}/* 销售模块 */.sale-box{border-top: 1px solid #ccc;background-color: #fff;margin: 4px;}.sale-hd{height: 44px;border-bottom: 1px solid #ccc;position: relative;}.sale-hd h2{position: relative;text-indent: -999px;overflow: hidden;}.sale-hd h2::after{position: absolute;top: 8px;left: 20px;content: "";width: 79px;height: 20px;background: url(../img/hot.png) no-repeat 0 -20px;background-size: 79px auto;}.more{position: absolute;top: 0px;right: 5px;background: -webkit-linear-gradient(left,#ff506a,#ff6bc4);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;}.more::after{content: "";position: absolute;top: 9px;right: 9px;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:nth-child(1){border-right: 1px solid #eee;}.row a img{width: 100%;}/* 底部工具栏模块 */.tool-box{display: flex;height: 60px;background-color: #fff;border-top: 1px solid #c2c2c2;border-bottom: 1px solid #c2c2c2;}.tool-box li{flex: 1;}.tool-box a{display: flex;flex-direction: column;align-items: center;font-size: 12px;}.tool-box li [class^="tool-icon"]{width: 20px;height: 20px;margin-top: 8px;background: url(../img/sprite.png) no-repeat -58px -152px;background-size: 104px auto;}.tool-box li .tool-icon-img2{background-position: -58px -172px;}.tool-box li .tool-icon-img3{background-position: -58px -309px;}.note{width: 100%;text-align: center;}
页面效果展示 -仿携程网移动端首页
