携程首页

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. vue的computed计算属性

    computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加  () ,应当普通属性使用 例:console.log(t ...

  2. VOIP RTP RTSP 实现 Baresip 源码分析

    RTP 使用 udp 进行数据传输,udp 是不能保证,数据包一定可以到达的,也不提供时序.同时还有 MTU 限制. RTCP 用来配合 RTP 提供,传输报告,会话建立和退出. 一大批参考规范 * ...

  3. Asp.Net Core 中IdentityServer4 授权原理及刷新Token的应用

    一.前言 上面分享了IdentityServer4 两篇系列文章,核心主题主要是密码授权模式及自定义授权模式,但是仅仅是分享了这两种模式的使用,这篇文章进一步来分享IdentityServer4的授权 ...

  4. 部署harbor以https模式和k8s对接

    集群时间同步 我们在之前的kubeasz部署高可用kubernetes1.17.2 并实现traefik2.1.2部署篇已经实现了基于chrony的时间同步 [root@bs-k8s-master01 ...

  5. [转]【maven】解决Missing artifact jdk.tools:jdk.tools:jar:1.6

    解决在pom.xml文件中出现的Missing artifact jdk.tools:jdk.tools:jar:1.6问题 <dependency> <groupId>jdk ...

  6. 2020年PHP 面试问题(二）

    一.什么是 CGI?什么是 FastCGI?php-fpm,FastCGI,Nginx 之间是什么关系? CGI,通用网关接口,用于WEB服务器和应用程序间的交互,定义输入输出规范,用户的请求通过WE ...

  7. 两个看似相同，结果不同的SQL逻辑

    一朋友问我的,看着挺有意思,记录一下: 表item1,里面有上面三个字段,一共10条数据,接下来有两个相似的sql语句得到了不一样的查询结果. 表数据如下:  两条SQL及查询结果: 我的理解答: S ...

  8. xgboost安装与原理

    1.xgboost库的安装 先在网址https://www.lfd.uci.edu/~gohlke/pythonlibs/#xgboost 中下载whl文件,注意一定要下载跟自己当前安装Python版 ...

  9. python 产生随机数，随机字符串

    import randomimport string#随机整数:print random.randint(1,50)#随机选取0到100间的偶数:print random.randrange(0, 1 ...

  10. TensorFlow 一步一步实现卷积神经网络

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! TensorFlow 从入门到精通系列教程: http://www ...