携程首页

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. UICollectionViewCell设置阴影

    //@mg:masksToBounds必须为NO否者阴影没有效果 // cell.layer.masksToBounds = NO; cell.layer.contentsScale = [UIScr ...

  2. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  3. python 异步MySQL存库

    对于异步框架而言,这些延迟是无法接受的.因此, Twisted 提供了 twisted.enterprise.adbapi, 遵循DB-API 2.0协议的一个异步封装. adbapi 在单独的线程里 ...

  4. windows 下载~安装nginx

    nginx 中文文档 http://www.nginx.cn/doc/ 到nginx官网下载安装包http://nginx.org/en/download.html 解压安装包 进入windows的c ...

  5. vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons

    vscode灰暗色主题和 左侧加图标 Spacegray VSCode vscode-icons

  6. BigDecimal介绍及BigDecimal实现四舍五入

    BigDecimal介绍及BigDecimal实现四舍五入 BigDecimal是什么? 我们知道float最大精度是7-8位有效数字,而double的最大精度是16-17位有效数字,那么大于16位的 ...

  7. 靓仔，整合SpringBoot还在百度搜配置吗？老司机教你一招！！！

    导读 最近陈某公司有些忙,为了保证文章的高质量可能要两天一更了,在这里陈某先说声不好意思了!!! 昨天有朋友问我SpringBoot如何整合Redis,他说百度谷歌搜索了一遍感觉不太靠谱.我顿时惊呆了 ...

  8. Natas31 Writeup（Perl 远程命令执行）

    Natas31: 源码如下: my $cgi = CGI->new; if ($cgi->upload('file')) { my $file = $cgi->param('file ...

  9. fastjson JSONObject.toJSONString 出现 $ref: "$."的解决办法（重复引用）

    首先,fastjson作为一款序列化引擎,不可避免的会遇到循环引用的问题,为了避免StackOverflowError异常,fastjson会对引用进行检测. 如果检测到存在重复/循环引用的情况,fa ...

  10. Blazor-断开连接后重新加载浏览器

    在大多数情况下,Blazor将与以前相同的线路上重新连接到服务器.但有时无法重新连接,需要重新加载web浏览器才能使网站重新工作.如果服务器回收应用程序池,则需要手动重新加载页面在没有调试的情况下在I ...