携程首页

flex解决了float和postion的遗留问题，对移动端比较友好。

  1. 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值（比例）
  2. 布局时可以先从大的页面着手，搭建出基本的框架

.banner>.nav+.extra+.footer

比如：.nav下面是有很多item，根据观察分为左边部分和右边部分，因此nav就是flex布局;sub和pub的比例就是1:2..

值得注意的地方就是sub下面的a是使用float进行布局的，因此是两种布局方式结合使用.

先放一张图：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      ul {

        list-style: none;

      }

      a,

      a:hover {

        color: #eee;

        text-decoration: none;

      }

      body {

        background-color: #eee;

      }

      html,

      body {

        width: 100%;

      }

      /* 外部容器是flex布局 */

      .layout {

          background-color: #fff;

        width: 100%;

        height: 1000px;

        margin: 0 auto;

        /* 设置盒子大小 */

        min-width: 320px;

        max-width: 640px;

      }

      .banner img {

        width: 100%;

      }

      .nav {

        padding: 5px;

      }

      .item {

        height: 90px;

        background-color: pink;

        margin-bottom: 5px;

        border-radius: 5px;

        display: flex;

      }

      .item:nth-child(2) {

        background-color: yellowgreen;

      }

      .item:nth-child(3) {

        background-color: green;

      }

      .item:nth-child(4) {

        background-color: darksalmon;

      }

      .item:last-child a {

        width: 33.33%;

      }

      .pub {

        flex: 1;

      }

      .sub {

        flex: 2;

      }

      .sub a {

        height: 45px;

        float: left;

        width: 50%;

        text-align: center;

        line-height: 45px;

        color: #fff;

        font-size: 14px;

        border-left: 1px solid #fff;

        border-bottom: 1px solid #fff;

        box-sizing: border-box;

      }

      .extra {

        display: flex;

      }

      .extra a{

        flex: 1;

      }

      .extra img{

          width: 100%;

      }

      .f-nav{

        display: flex;

        height: 40px;

        border-top: 1px solid #ccc;

        border-bottom: 1px solid #ccc;

      }

      .f-nav li{

          flex: 1;

          text-align: center;

          line-height: 40px;

          color:#eee;

      }

      .footer p{

          text-align: center;

          font-size: 14px;

          color:#ccc

      }

    </style>

  </head>

  <body>

    <!-- 外部容器 -->

    <div class="layout">

      <div class="banner">

        <img src="./images/banner4.jpg" alt="" />

      </div>

      <div class="nav">

        <div class="item">

          <div class="pub"></div>

          <div class="sub">

            <a href="javascript:;">海外酒店</a>

            <a href="javascript:;">团购</a>

            <a href="javascript:;">特惠酒店</a>

            <a href="javascript:;">客栈公寓</a>

          </div>

        </div>

        <div class="item">

          <div class="pub"></div>

          <div class="sub">

            <a href="javascript:;">火车票</a>

            <a href="javascript:;">汽车票船票</a>

            <a href="javascript:;">国际机票</a>

            <a href="javascript:;">自驾专车</a>

          </div>

        </div>

        <div class="item">

          <div class="pub"></div>

          <div class="sub">

            <a href="javascript:;">攻略身边</a>

            <a href="javascript:;">邮轮</a>

            <a href="javascript:;">周末游</a>

            <a href="javascript:;">保险签证</a>

          </div>

        </div>

        <div class="item">

          <div class="sub">

            <a href="javascript:;">门票玩乐</a>

            <a href="javascript:;">美食</a>

            <a href="javascript:;">全球购</a>

            <a href="javascript:;">礼品卡</a>

            <a href="javascript:;">出境WIFI</a>

            <a href="javascript:;">更多</a>

          </div>

        </div>

      </div>

      <div class="extra">

          <a href="javascript:;void(0)">

            <img src="./images/extra_1.png" alt="">

          </a>

          <a href="javascript:;void(0)">

            <img src="./images/extra_1.png" alt="">

          </a>

      </div>

      <div class="footer">

          <ul class="f-nav">

              <li><a href="javascript:;void(0)">

                  我的

              </a></li>

              <li><a href="javascript:;void(0)">

                  客户端

              </a></li>

              <li><a href="javascript:;void(0)">

                  下载

              </a></li>

          </ul>

          <p>网站地图｜导航｜电脑版</p>

          <p>@2020携程旅行</p>

      </div>

    </div>

  </body>

</html>

携程首页--使用flex布局实现的更多相关文章

  1. 微信小程序UI------实现携程首页顶部的界面（弹性布局）

    今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下: 主要是携程首页的四个模块 ...

  2. Android 仿携程活动列表边框布局

    实现如下图所示的一个页面布局 布局框架 思路讲解: 1.一开始的思路是使用android提供的画布将布局中的内容花下来,之后想了想觉得比较麻烦,所以又开启了另外一条思路. 2.如上图“布局框架”所示. ...

  3. 今天携程出事了：让我们来学习下http的响应码

    就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...

  4. 携程移动端案列（flex布局、背景图缩放，文字阴影）

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...

  5. 携程Android App插件化和动态加载实践

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

  6. React Native实践之携程Moles框架

    编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...

  7. IBM、京东、携程、eBay 的 OpenStack 云

    我所了解的 IBM.京东.携程.eBay 的 OpenStack 云 参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文 ...

  8. React Native之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...

  9. 携程Android App的插件化和动态加载框架

    携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...

随机推荐

  1. 【猫狗数据集】利用tensorboard可视化训练和测试过程

    数据集下载地址: 链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw提取码:2xq4 创建数据集:https://www.cnblogs.com/xi ...

  2. vs code开发python时找不到当前目录下的文件、UnicodeDecodeError: 'gbk'

    一.vs code开发python时找不到当前目录下的文件, file = open("readme.txt")一直报错,找不到目录下面的文件 原来vscode 默认都是以打开的项 ...

  3. 【面试经验分享】java面试中的那些潜规则

    1.大纲 潜规则1:面试的本质不是考试,而是告诉面试官你会做什么 很多刚入行的小伙伴特别容易犯的一个错误,不清楚面试官到底想问什么,其实整个面试中面试官并没有想难道你的意思,只是想通过提问的方式来知道 ...

  4. 【原创】（求锤得锤的故事）Redis锁从面试连环炮聊到神仙打架。

    这是why技术的第38篇原创文章 又到了一周一次的分享时间啦,老规矩,还是先荒腔走板的聊聊生活. 有上面的图是读大学的时候,一次自行车骑行途中队友抓拍的我的照片.拍照的地方,名字叫做牛背山,一个名字很 ...

  5. php遍历文件夹中所有的文件

    遍历文件夹中的所有文件 思路:1.定义一个函数,把给定的文件夹当前目录遍历输出(用到的文件操作函数scandir():一次性读取当前文件夹所有的内容并以数组的形式返回.). 2.如果是文件夹则红色字体 ...

  6. 今天开dev的时候，config update一下别人的，但是忘了自己改过目录了，导致光看ip，想了半天，为什么接口不对

    今天开dev的时候,config update一下别人的,但是忘了自己改过目录了,导致光看ip,想了半天,为什么接口不对 baseUrl: {     //     // dev: 'http://1 ...

  7. 聊聊OkHttp实现WebSocket细节，包括鉴权和长连接保活及其原理！

    一.序 OkHttp 应该算是 Android 中使用最广泛的网络库了,我们通常会利用它来实现 HTTP 请求,但是实际上它还可以支持 WebSocket,并且使用起来还非常的便捷. 那本文就来聊聊, ...

  8. [Linux][C][gcc][tips] 在头文件中定义变量引发的讨论

    概述 本人的原创文章,最先发表在github-Dramalife-note中.转载请注明出处. Define variable(s) in header file referenced by mult ...

  9. 高性能-GC

    带着问题去思考!大家好 相对.NET 来说.CLR去处理了,C,C++这些就需要手动去垃圾回收. GC大部分容易察觉的性能问题.其实很多问题实际是哪个都是由于对垃圾回收器的行为和预期结果理解有误.在, ...

  10. 【简说Python WEB】Flask应用的文件结构

    目录 [简说Python WEB]Flask应用的文件结构 1.文件结构的目录 2.配置程序--config.py 3.app应用包 4.剥离出来的email.py 5.蓝本(BLueprint)的应 ...