携程首页

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

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

.banner>.nav+.extra+.footer

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

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

先放一张图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       ul {
  13.         list-style: none;
  14.       }
  15.       a,
  16.       a:hover {
  17.         color: #eee;
  18.         text-decoration: none;
  19.       }
  20.       body {
  21.         background-color: #eee;
  22.       }
  23.       html,
  24.       body {
  25.         width: 100%;
  26.       }
  27.       /* 外部容器是flex布局 */
  28.       .layout {
  29.           background-color: #fff;
  30.         width: 100%;
  31.         height: 1000px;
  32.         margin: 0 auto;
  33.         /* 设置盒子大小 */
  34.         min-width: 320px;
  35.         max-width: 640px;
  36.       }
  38.       .banner img {
  39.         width: 100%;
  40.       }
  42.       .nav {
  43.         padding: 5px;
  44.       }
  45.       .item {
  46.         height: 90px;
  47.         background-color: pink;
  48.         margin-bottom: 5px;
  49.         border-radius: 5px;
  50.         display: flex;
  51.       }
  52.       .item:nth-child(2) {
  53.         background-color: yellowgreen;
  54.       }
  55.       .item:nth-child(3) {
  56.         background-color: green;
  57.       }
  58.       .item:nth-child(4) {
  59.         background-color: darksalmon;
  60.       }
  61.       .item:last-child a {
  62.         width: 33.33%;
  63.       }
  64.       .pub {
  65.         flex: 1;
  66.       }
  67.       .sub {
  68.         flex: 2;
  69.       }
  70.       .sub a {
  71.         height: 45px;
  72.         float: left;
  73.         width: 50%;
  74.         text-align: center;
  75.         line-height: 45px;
  76.         color: #fff;
  77.         font-size: 14px;
  78.         border-left: 1px solid #fff;
  79.         border-bottom: 1px solid #fff;
  80.         box-sizing: border-box;
  81.       }
  82.       .extra {
  83.         display: flex;
  84.       }
  85.       .extra a{
  86.         flex: 1;
  87.       }
  88.       .extra img{
  89.           width: 100%;
  90.       }
  91.       .f-nav{
  92.         display: flex;
  93.         height: 40px;
  94.         border-top: 1px solid #ccc;
  95.         border-bottom: 1px solid #ccc;
  96.       }
  97.       .f-nav li{
  98.           flex: 1;
  99.           text-align: center;
  100.           line-height: 40px;
  101.           color:#eee;
  102.       }
  103.       .footer p{
  104.           text-align: center;
  105.           font-size: 14px;
  106.           color:#ccc
  107.       }
  108.     </style>
  109.   </head>
  110.   <body>
  111.     <!-- 外部容器 -->
  112.     <div class="layout">
  113.       <div class="banner">
  114.         <img src="./images/banner4.jpg" alt="" />
  115.       </div>
  116.       <div class="nav">
  117.         <div class="item">
  118.           <div class="pub"></div>
  119.           <div class="sub">
  120.             <a href="javascript:;">海外酒店</a>
  121.             <a href="javascript:;">团购</a>
  122.             <a href="javascript:;">特惠酒店</a>
  123.             <a href="javascript:;">客栈公寓</a>
  124.           </div>
  125.         </div>
  126.         <div class="item">
  127.           <div class="pub"></div>
  128.           <div class="sub">
  129.             <a href="javascript:;">火车票</a>
  130.             <a href="javascript:;">汽车票船票</a>
  131.             <a href="javascript:;">国际机票</a>
  132.             <a href="javascript:;">自驾专车</a>
  133.           </div>
  134.         </div>
  135.         <div class="item">
  136.           <div class="pub"></div>
  137.           <div class="sub">
  138.             <a href="javascript:;">攻略身边</a>
  139.             <a href="javascript:;">邮轮</a>
  140.             <a href="javascript:;">周末游</a>
  141.             <a href="javascript:;">保险签证</a>
  142.           </div>
  143.         </div>
  144.         <div class="item">
  145.           <div class="sub">
  146.             <a href="javascript:;">门票玩乐</a>
  147.             <a href="javascript:;">美食</a>
  148.             <a href="javascript:;">全球购</a>
  149.             <a href="javascript:;">礼品卡</a>
  150.             <a href="javascript:;">出境WIFI</a>
  151.             <a href="javascript:;">更多</a>
  152.           </div>
  153.         </div>
  154.       </div>
  155.       <div class="extra">
  156.           <a href="javascript:;void(0)">
  157.             <img src="./images/extra_1.png" alt="">
  158.           </a>
  159.           <a href="javascript:;void(0)">
  160.             <img src="./images/extra_1.png" alt="">
  161.           </a>
  162.       </div>
  163.       <div class="footer">
  164.           <ul class="f-nav">
  165.               <li><a href="javascript:;void(0)">
  166.                   我的
  167.               </a></li>
  168.               <li><a href="javascript:;void(0)">
  169.                   客户端
  170.               </a></li>
  171.               <li><a href="javascript:;void(0)">
  172.                   下载
  173.               </a></li>
  174.           </ul>
  175.           <p>网站地图｜导航｜电脑版</p>
  176.           <p>@2020携程旅行</p>
  177.       </div>
  178.     </div>
  179.   </body>
  180. </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. 为什么java内部类访问局部变量必须声明为final？

    https://blog.csdn.net/z55887/article/details/49229491 先抛出让我疑惑了很久的一个问题 编程时,在线程中使用局部变量时候经常编译器会提示:局部变量必 ...

  2. echarts-liquidfill 水球显示小数点

    使用echarts-liquidfill.js的水球,水球上显示的文字可以使用chartOption.series[0].label.normal.formatter设置,想显示什么显示什么. var ...

  3. golang.org/x/sys/unix: unrecognized

    安装的过程中报错 : package golang.org/x/sys/unix: unrecognized import path "golang.org/x/sys/unix" ...

  4. Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

  5. Spark入门（三）--Spark经典的单词统计

    spark经典之单词统计 准备数据 既然要统计单词我们就需要一个包含一定数量的文本,我们这里选择了英文原著<GoneWithTheWind>(<飘>)的文本来做一个数据统计,看 ...

  6. ASP.net MVC 构建layui管理后台(构造基础仓储)<1>

    本文章为ASP.net MVC 构建layui管理后台,第一篇. 使用EF+ado.net 实体数据模型模式进行底层的数据库连接. 在项目添加一个类库Model 在类库Model上添加一个ado.ne ...

  7. windows 下载~安装nginx

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

  8. react 装 router - yarn add react-router-dom@next

    react 装 router yarn add react-router-dom@next

  9. Linux 应用领域

    与Windows操作系统软件一样,Linux也是一个操作系统软件.但与Windows不同的是,Linux是一套开放源代码程序的,并可以自由传播的类UNIX操作系统软件,随着信息技术的更新变化,Linu ...

  10. 《仙剑奇侠传柔情版》Java的简单实现（二）

    基于<仙剑奇侠传柔情版>Java的简单实现(二) 2018-12-02 by Kris 需要上次的GameFrame.class中窗口框架承载:https://www.cnblogs.co ...