900字范文 > flex布局：携程网移动端首页案例

flex布局：携程网移动端首页案例

时间：2023-10-22 16:53:44

相关推荐

flex布局：携程网移动端首页案例

效果展示：

文章目录

一、技术选型二、开发步骤1.创建相应文件夹结构2.设置视口标签3.引入样式文件4.开发注意事项三、代码模块

一、技术选型

技术选型：

方案：采取单独制作移动端

技术：使用flex弹性布局技术

设计图：最小宽度320px / 最大宽度540px

二、开发步骤

1.创建相应文件夹结构

项目名命名为XC-Mobile

创建对应文件夹结构如下：

2.设置视口标签

代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

3.引入样式文件

引入normalize.css初始化文件

下载链接：https://csstools.github.io/normalize.css/

<link rel="stylesheet" href="./css/normalize.css">

引入ico图标

<link rel="shortcut icon" href="favicon.ico" />

引入首页css样式

<link rel="stylesheet" href="./css/index.css">

首页常用初始化样式

body {width: 100%;max-width: 540px;min-width: 320px;font: normal 14px/1.5 tahoma,"microsoft YaHei",verdana;color: #000;background-color: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;margin: 0 auto;}

4.开发注意事项

1.咱们使用所有图片素材“均使用2倍图做法”

比如说：

这是一张精灵图

精灵图的二倍图做法：

a.首先使用ps / fw 将整张图片等比例缩小原图的一半

比如这张图是208*655的

我们可以点击宽高旁边的限制比例按钮（同时修改宽高）

将宽度修改为原来的一半（原来是208，所有我们修改为104）敲回车，高度自动修改

b.引入精灵图

在修改后的精灵图中确定需要图片的位置

再引入图片

注意：

咱们直接引入的图片位置是不对的

我们需要将background-size也设置为原来的一半

所以：

background:url(../images/sprite.png) no-repeat -59px -279px;background-size: 104px auto;

这样就可以了！！！！

2.我们固定定位的盒子必须设置宽度高度

.search_index {display: flex;/* 固定定位宽度跟父级没有关系，以屏幕为准 */position: fixed;top: 0;/* 盒子水平居中对齐 */left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 固定定位盒子应该有宽度 */width: 100%;max-width: 540px;min-width: 320px;height: 44px;

这样盒子才能正常显示！！！！！

三、代码模块

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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>携程在手，说走就走</title><link rel="shortcut icon" href="favicon.ico" /><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/index.css"></head><body><div class="search_index"><div class="search">搜索：目的地/酒店/景点/航班号</div><a href="#" class="user">我的</a></div><div class="focus"><img src="./upload/focus.jpg" alt=""></div><ul class="local_nav"><li><a href="#" title="景点·玩乐"><span class="local_nav_icon1"></span><span>景点·玩乐</span></a></li><li><a href="#" title="周边游"><span class="local_nav_icon2"></span><span>周边游</span></a></li><li><a href="#" title="美食林"><span class="local_nav_icon3"></span><span>美食林</span></a></li><li><a href="#" title="一日游"><span class="local_nav_icon4"></span><span>一日游</span></a></li><li><a href="#" title="当地攻略"><span class="local_nav_icon5"></span><span>当地攻略</span></a></li></ul><nav><div class="nav_common"><div class="nav_items"><a href="#">酒店</a></div><div class="nav_items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav_items"><a href="#">团购</a><a href="#">民宿·客栈</a></div></div><div class="nav_common"><div class="nav_items"><a href="#">机票</a></div><div class="nav_items"><a href="#">火车票</a><a href="#">特价机票</a></div><div class="nav_items"><a href="#">汽车票·船票</a><a href="#">专车·租车</a></div></div><div class="nav_common"><div class="nav_items"><a href="#">旅游</a></div><div class="nav_items"><a href="#">门票</a><a href="#">目的地攻略</a></div><div class="nav_items"><a href="#">游轮旅行</a><a href="#">定制旅行</a></div></div></nav><ul class="fitnav"><li><a href="#"><span class="fitnav_icon1"></span><span>WIFI电话卡</span></a></li><li><a href="#"><span class="fitnav_icon2"></span><span>保险·签证</span></a></li><li><a href="#"><span class="fitnav_icon3"></span><span>外币兑换</span></a></li><li><a href="#"><span class="fitnav_icon4"></span><span>购物</span></a></li><li><a href="#"><span class="fitnav_icon5"></span><span>当地向导</span></a></li><li><a href="#"><span class="fitnav_icon6"></span><span>自由行</span></a></li><li><a href="#"><span class="fitnav_icon7"></span><span>境外玩乐</span></a></li><li><a href="#"><span class="fitnav_icon8"></span><span>礼品卡</span></a></li><li><a href="#"><span class="fitnav_icon9"></span><span>信用卡</span></a></li><li><a href="#"><span class="fitnav_icon10"></span><span>更多</span></a></li></ul><div class="sales_box"><div class="sales_hd"><h2>热门活动</h2><a href="#">获取更多福利</a></div><div class="sales_bd"><div class="sales_bd_row"><a href="#"><img src="./upload/pic1.jpg" alt=""></a><a href="#"><img src="./upload/pic2.jpg" alt=""></a></div><div class="sales_bd_row"><a href="#"><img src="./upload/pic3.jpg" alt=""></a><a href="#"><img src="./upload/pic4.jpg" alt=""></a></div><div class="sales_bd_row"><a href="#"><img src="./upload/pic5.jpg" alt=""></a><a href="#"><img src="./upload/pic6.jpg" alt=""></a></div></div></div><div class="footer_nav"><a href="#"><span class="footer_nav_icon1"></span><span>电话预订</span></a><a href="#"><span class="footer_nav_icon2"></span><span>下载客户端</span></a><a href="#"><span class="footer_nav_icon3"></span><span>我的</span></a></div><ul class="copyright"><li><a href="#">网站地图</a></li><li></li><li class="language"><a href="#">Language</a></li><li></li><li><a href="#">电脑版</a></li></ul><p class="footer_copyright">@携程旅行 | 沪ICP备08023580号</p></body></html>

css代码：

* {margin: 0;padding: 0;}body {width: 100%;max-width: 540px;min-width: 320px;font: normal 14px/1.5 tahoma,"microsoft YaHei",verdana;color: #000;background-color: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;margin: 0 auto;}div {box-sizing: border-box;}a {text-decoration: none;color: #222;}li {list-style: none;}/* 顶部搜索模块 */.search_index {display: flex;/* 固定定位宽度跟父级没有关系，以屏幕为准 */position: fixed;top: 0;/* 盒子水平居中对齐 */left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 固定定位盒子应该有宽度 */width: 100%;max-width: 540px;min-width: 320px;height: 44px;border-bottom: 1px solid #cccccc;border-top: 1px solid #cccccc;background-color: #f6f6f6;flex-direction: row;}.search {position: relative;flex: 1;color: #898989;height: 26px;font-size: 12px;line-height: 24px;border: 1px solid #999;border-radius: 5px;margin: 9px 0 0 9px;padding-left: 28px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.search::before {position: absolute;top: 6px;left: 6px;content:"";width: 14px;height: 14px;background:url(../images/sprite.png) no-repeat -59px -279px;background-size: 104px auto;}.user {width: 44px;height: 44px;font-size: 12px;color: #66bfe6;text-align: center;background-color: rgba(0, 0, 0, 0);}.user::before {display: block;content: "";width: 24px;height: 24px;background: url(../images/sprite.png) no-repeat -58px -194px;background-size: 104px auto;margin: 2px auto 0;}.focus {padding-top: 44px;}.focus img {width: 100%;}/* 导航栏模块 */.local_nav {display: flex;/* width: 100%; */height: 64px;background-color: #fff;border-radius: 8px;flex-direction: row;margin: 4px 5px;}.local_nav li {flex: 1;height: 64px;}.local_nav li a {display: flex;height: 64px;font-size: 12px;flex-flow: column nowrap;justify-content: center;align-items: center;}.local_nav li [class^="local_nav_icon"] {width: 34px;height: 34px;background: url(../images/localnav_bg.png) no-repeat 0 0;background-size: 34px auto;}.local_nav li .local_nav_icon2 {background-position: 0 -34px;}.local_nav li .local_nav_icon3 {background-position: 0 -68px;}.local_nav li .local_nav_icon4 {background-position: 0 -102px;}.local_nav li .local_nav_icon5 {background-position: 0 -136px;}/* 主导航栏模块 */nav {overflow: hidden;border-radius: 8px;margin: 0 5px 4px;}.nav_common {display: flex;width: 100%;height: 88px;background: -webkit-linear-gradient(left,#fa5956,#fa9b4d);flex-flow: row nowrap;}.nav_common:nth-child(2) {margin: 3px 0;background: -webkit-linear-gradient(left,#4b8fed,#53bced);}.nav_common:nth-child(3) {background: -webkit-linear-gradient(left,#34c2aa,#6cd557);}.nav_items {flex: 1;display: flex;flex-flow: column nowrap;}.nav_items a {flex: 1;text-align: center;line-height: 44px;color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.2);}.nav_items:nth-child(-n+2) {border-right: 1px solid #f2f2f2;}.nav_items a:first-child {border-bottom: 1px solid #f2f2f2;}.nav_items:first-child a {border: 0;background: url(../images/hotel.png) no-repeat bottom center;background-size: 121px auto;}.nav_common:nth-child(2) .nav_items:first-child a{background: url(../images/m_03.png) no-repeat bottom center;background-size: 121px auto;}.nav_common:nth-child(3) .nav_items:first-child a{background: url(../images/m.crtip_03.png) no-repeat bottom center;background-size: 121px auto;}/* 副导航栏模块 */.fitnav {display: flex;border-radius: 8px;background-color: #fff;border: 1px solid #e3e3e3;flex-flow: row wrap;box-shadow: 0 1px #e3e3e3;margin: 0 5px;padding: 5px 0;}.fitnav li {/* 里面的子盒子可以写百分比相对于父级来说的*/flex: 20%;}.fitnav a {display: flex;flex-flow: column nowrap;align-items: center;font-size: 12px;margin: 6px 0;}.fitnav li [class^="fitnav_icon"] {width: 24px;height: 24px;background: url(../images/subnav-bg.png) no-repeat 0 0;background-size: 24px auto;}.fitnav li .fitnav_icon2 {background-position: 3px -24px;}.fitnav li .fitnav_icon3 {background-position: 3px -54px;}.fitnav li .fitnav_icon4 {background-position: 3px -275px;}.fitnav li .fitnav_icon5 {background-position: 2px -83px;}.fitnav li .fitnav_icon6 {background-position: 3px -138px;}.fitnav li .fitnav_icon7 {background-position: 1px -169px;}.fitnav li .fitnav_icon8 {background-position: 1px -112px;}.fitnav li .fitnav_icon9 {background-position: 1px -196px;}.fitnav li .fitnav_icon10 {background-position: 3px -246px;}/* 销售模块 */.sales_box {border-top: 1px solid #dbdbdb;background-color: #fff;margin: 7px 4px 0;}.sales_hd {position: relative;height: 44px;border: 1px solid #f2f2f2;}.sales_hd h2 {position: relative;/* font-size: 0; */overflow: hidden;text-indent: -999px;}.sales_hd h2::before {position: absolute;top: 12px;left: 8px;content: "";width: 79px;height: 15px;background:url(../images/hot.png) no-repeat 4px -19px;background-size: 79px auto;}.sales_hd h2::after {position: absolute;top: 12px;left: 95px;content: "";width: 36px;height: 15px;background:url(../images/poster_07.png) no-repeat;background-size: 36px auto;}.sales_hd a {position: absolute;top: 7px;right: 5px;color: #fff;font-size: 12px;background: -webkit-linear-gradient(left,#ff4f65,#ff6cc8);border-radius: 14px;padding: 4px 20px 4px 10px;}.sales_hd a::after {position: absolute;top:9px;right: 11px;content: "";width:6px;height: 6px;transform: rotate(-45deg);border-right: 2px solid #fff;border-bottom: 2px solid #fff;}.sales_bd {display: flex;flex-flow: column nowrap;}.sales_bd_row:first-child {flex: 2;}.sales_bd_row:nth-child(n+2) {flex: 1;}.sales_bd_row {display: flex;border-bottom: 1px solid #dbdbdb;}.sales_bd_row a {flex: 1;}.sales_bd_row a:nth-child(1) {border-right: 1px solid #dbdbdb;}.sales_bd_row a img {width: 100%;}/* 底部导航栏模块 */.footer_nav {display: flex;height: 51px;border-top: 1px solid #dbdbdb;border-bottom: 1px solid #c2c2c2;margin: 8px 4px;text-align: center;align-items: center;/* justify-content: space-around; */}.footer_nav a {display: flex;flex: 1;color: #333;flex-flow: column nowrap;align-items: center;}.footer_nav a [class^="footer_nav_icon"] {display: block;width: 20px;height: 20px;background: url(../images/sprite.png) no-repeat;background-size: 104px auto;}.footer_nav a .footer_nav_icon1 {background-position: -58px -152px;}.footer_nav a .footer_nav_icon2 {background-position: -58px -172px;}.footer_nav a .footer_nav_icon3 {background-position: -59px -309px;}/* 版权模块 */.copyright {display: flex;flex-flow: row wrap;justify-content: center;align-items: center;}.copyright a {color: #666;font-size: 14px;}.copyright li:nth-child(even) {width: 1px;height: 16px;background-color: #af99af;margin: 0 7px;}.language {position: relative;margin: 0 18px;}.language::before {position: absolute;top: 2px;left: -16px;content: "";width: 16px;height: 16px;background: url(../upload/earth.png) no-repeat;background-size: 16px auto;}.language::after {position: absolute;top: 6px;right: -14px;content: "";width: 6px;height: 6px;transform: rotate(45deg);border-right: 2px solid #666666;border-bottom: 2px solid #666666;}.footer_copyright {color: #999999;font-size: 12px;text-align: center;}

到这里就结束啦，送给各位朋友一句我最喜欢的话：

少年不惧岁月长，彼方尚有荣光在！

一起加油！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。