制作携程网移动端首页

最新推荐文章于 2022-09-14 16:45:40 发布

辰逸博客

最新推荐文章于 2022-09-14 16:45:40 发布

阅读量4.1k

点赞数 11

分类专栏： css 文章标签：携程网案例携程网移动端首页常见flex布局思路

本文链接：https://blog.csdn.net/chenyiboke/article/details/103175126

版权

1. 技术选型方案：我们采取单独制作移动页面方案技术：布局采取flex布局 2. 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale...

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

1. 技术选型

	方案： 我们采取单独制作移动页面方案
    技术： 布局采取flex布局

2. 设置视口标签以及引入初始化样式

 <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/mormalize.css">
            <link rel="stylesheet" href="css/index.css">

3. 常用初始化样式

body{
   
            Max-widht: 540px;
            min-width:320px;
            margin:0 auto;
            font: normal 14px/1.5 Tahoma,"Lucide",Verdana,"Microsoft"
            color:#000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
            }

4. 常见flex布局思路

   1. 默认主轴是X轴 
   2. 把主轴设为Y轴
   3. 把侧轴设为居中对齐

命令演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="H5/css/normalize.css">
    <link rel="stylesheet" href="index2.css">
    <title>携程在手，说走就走</title>
</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-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>

    </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="subnav-entry">
        <li>
            <a href="#">
                <span class="s

最低0.47元/天解锁文章

辰逸博客

关注

11
点赞
踩
45

收藏

觉得还不错? 一键收藏
打赏
1
评论
制作携程网移动端首页

1. 技术选型方案：我们采取单独制作移动页面方案技术：布局采取flex布局 2. 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale...
复制链接

扫一扫