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

置顶

苠苠超可爱

已于 2022-12-22 20:52:22 修改

阅读量1k

点赞数 1

分类专栏：前端开发案例文章标签：前端 javascript html

于 2022-12-21 17:35:32 首次发布

本文链接： https://blog.csdn.net/weixin_55701027/article/details/128399237

版权

本文介绍了如何采用flex布局技术来开发携程移动端首页。从技术选型到开发步骤，详细讲解了设置视口标签、引入样式文件以及开发过程中的注意事项，包括图片素材的处理和固定定位盒子的设置。最后提供了部分html和css代码示例。

摘要由CSDN通过智能技术生成

效果展示：
在这里插入图片描述

文章目录

一、技术选型

二、开发步骤

1.创建相应文件夹结构
2.设置视口标签
3.引入样式文件
4.开发注意事项

三、代码模块

一、技术选型

技术选型：
方案：采取单独制作移动端
技术：使用flex弹性布局技术
设计图：最小宽度320px / 最大宽度540px

二、开发步骤

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/

<!-- 引入css初始化样式 -->
    <link rel="stylesheet" href="./css/normalize.css">

引入ico图标

<!-- 引入ico图标 -->
    <link rel="shortcut icon" href="favicon.ico" />

引入首页css样式

<!-- 引入首页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>
    <!-- 引入ico图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入css初始化样式 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入首页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