zl程序教程

您现在的位置是:首页 >  其他

当前栏目

flex布局-携程网项目

项目 布局 flex
2023-09-27 14:27:34 时间

体验flex布局

传统布局与flex弹性布局

传统布局flex弹性布局
兼容性好操作方便,移动端应用很广泛
布局繁琐pc端情况差
局限性IE 11或更低版本很难支持

flex布局原理

  • 定义: flexible box弹性布局,任何一个容器都可以指定为flex布局
  • 注意点:
    • 当我们为父元素设置flex,子元素的float,clear,vertical-align属性将失效
    • 子容器可以横向排列也可以纵向排列
  • 总结: 通过给父盒子添加flex,来控制子盒子的位置和排列方式

flex布局常用属性

flex布局父项常用属性

  • 设置主轴的方向-flex-direction

    • 注意: 主轴和侧轴是会变化, flex-direction 设置谁为主轴,剩下的就是侧轴,子元素是跟着主轴来排列的。

      属性值解释说明
      row默认值 - 从左到右
      row-reverse从右到左
      column从上到下
      column-reverse从下到上
  • 主轴子元素排列方式-justify-content

    • 定义项目(子元素)在主轴上的对齐方式,在使用之前一定要先确认主轴方向

      属性值解释说明
      flex-start默认值 - 从头部开始,如果主轴是x轴,则从左到右
      center在主轴居中对齐(如果主轴是x轴则水平居中)
      space-around平分剩余空间
      space-between先两边贴边再平分剩余空间(重要)
      flex-end在主轴结束位置对齐
  • 设置子元素是否换行-flex-wrap

    • flex布局中是默认不换行的(如果超过父盒子子元素会被压缩),项目都排在一条线(又称“轴线”) 上可使用flex-wrap进行调整

      属性值说明
      no-wrap默认值,不需要设置,默认不换行
      wrap换行
  • 侧轴上子元素排列方式(单行)-align-items

    • 该元素是控制子项在侧轴(默认Y轴)上的排列方式,在子元素为单项(单行)的时候使用

      属性值解释说明
      flex-start默认值 - 从上到下(顶对齐)
      dlex-end从下到上(底对齐)
      center挤在一起居中(垂直居中)
      stretch拉伸(不设置子元素高度)
  • 侧轴上子元素排列方式(多行)-align-content

    • 设置子项在侧轴的排列方式,且只能用于子元素出现换行的情况下使用(多行),在单行下没有效果

      属性值解释说明
      flex-start在侧轴的头部开始排列
      flex-end在侧轴的尾部开始排列
      center在侧轴中间显示
      space-around子项在侧轴平分剩余空间
      space-between子项在侧轴先分布在两头,再平分剩余空间
      stretch设置子项元素高度平分父元素高度
  • 复合属性-flex-flow

    • flex-direction和flex-wrap属性的复合属性

flex布局子项常见属性

  • 子项常见属性
    • flex子项目占的份数
    • align-self 控制子项自己在侧轴排列方式
    • order 属性定义子项的排列顺序(前后顺序)
  • flex属性
    • 定义子子项目分配父盒子剩余空间,flex表示占多少份数,属性值为数字,默认值为0
    • 注:分配剩余空间会使用剩余空间/份数之和,然后根据每个子元素的flex值分给多少份
  • 控制子元素自己在侧轴上的排列方式-align-self
    • 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,这等同于strech(拉伸)。
  • 项目排列顺序-order
    • 调整子项加载的顺序,默认值是0,如果想往前提,属性值可以为负数,数值越小排列越靠前。
    • 注:和z-index不一样

携程网移动端首页制作

初始设置:

  1. 选取flex布局
  2. 搭建基本文件
  3. 设置视口标签、引入初始化样式、特殊样式
  4. 分析布局,给模块命名

搜索栏部分

  1. 通过fixed定位固定搜索栏,保证导航栏位置始终在页面上方
<div class="search-index">
        <div class="search">
            <span>搜索:目的地/酒店/景点/航班号</span>
        </div>
        <div class="login">
            <span class="user-icon"> </span>
            <span>我 的</span>
        </div>
    </div>
复制代码
  1. 通过精灵图在css里设置搜索框需要的图标
.search-index {
    display: flex;
    width: 100%;
    height: 44px;
    padding-left: 12px;
    box-sizing: border-box;
    align-items: center;
}
.search-index .search {
    display: flex;
    align-items: center;
    flex: 1;
    height: 28px;
    padding: 2px 5px;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #fff;
}
.search-index .search span {
    padding-left: 35px;
    line-height: 18px;
    font-size: 15px;
    color: #666;
}
.search-index .search span::after{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    background: url() no-repeat 0px 0px;
    background-size: 21px auto;
    left: 10px;
    top: 2px;
}
.search-index.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 51px;
    height: 44px;
    padding-right: 4px;
    background-color: ■skyblue;
}
.search-index.login::after{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url() no-repeat 0px -36px ;
    background-size: 21px auto;
    order: -1;
}
.search-index.login span{
    font-size: 12px;
    color: #fff;
    line-height: 12px;
}
复制代码

游玩导航栏部分

  1. 用精灵图实现,先使用display:flex开启flex布局然后设置好一个的li让图片和文字上下排列,接下来就通过background-position修改一下其他图片的位置就可以了。
  <ul class="local-nav">
    <li>
      <a><span class="icon-local"></span> <span>攻略·景点</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-around"></span>
        <span>门票·玩乐</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-food"></span>
        <span>美食林</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-oneday"></span>
        <span>周边游</span></a>
    </li>
    <li>
      <a><span class="icon-local icon-local-strategy"></span>
        <span>一日游</span></a>
    </li>
  </ul>
复制代码

css代码

/* two */
.grid-nav .grid-nav-common .grid-nav-items .grid-nav-jhj-text,
.local-nav,
.local-nav li a {
    position: relative;
}
 
.local-nav {
    background: #fff;
    border-radius: 8px;
    margin: -52px 12px 10px;
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
    z-index: 11;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
 
.local-nav li {
    flex: 1;
}
 
li {
    list-style-type: none;
}
 
.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .75rem;
    line-height: 1;
    color: #222;
}
 
.local-nav li .icon-local {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-image: url('../images/home-fivemain-sprite2x@v7.15.png');
    background-repeat: no-repeat;
    background-size: 40px auto;
    display: block;
}
 
.local-nav li .icon-local-around {
    background-position: 0 -40px;
}
 
.local-nav li .icon-local-food {
    background-position: 0 -80px;
}
 
.local-nav li .icon-local-oneday {
    background-position: 0 -120px;
}
 
.local-nav li .icon-local-strategy {
    background-position: 0 -160px;
}
复制代码

主要功能导航栏

  1. 分成上中下三个flex布局,每一个内容只不过是颜色和文字有一些变化
    • 主导航栏 => 大盒子里包含三行,每一行再分三列,后面两列细分上下两行。
    • 大盒子用nav,小盒子用div。
    • 宽度不用给,左右下(上:上一个盒子设置过了)设置margin,高度小盒子撑开即可,设置小圆角。
       <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">2</div>
        <div class="nav-common">3</div>
    </nav>

复制代码
  1. 每行的盒子还需设置距离 ,给中间的盒子设置上下边距,或者前两个盒子都设置下边距。
  2. 发现小圆角没有出现,那是因为div没有设置,它把父容器盖住了,给其设置overflow: hidden;,切去多余的小圆角即可。
  3. 第一列下方需要填充背景图标,是三倍图,进行缩放。
    • 图片需要靠底端对齐,水平居中。
  4. 背景颜色渐变,css3新增属性。
    • 从一种颜色逐渐变为另一种颜色。
    • 背景渐变必须添加浏览器私有前缀
    • 起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top
nav {
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common {
    height: 88px;
    background-color: pink;
}
.nav-common:nth-child(2) {
    margin: 3px 0;
}
.nav-items:nth-child(1) a {
    border: 0;
    background: url(../images/hotel.png) no-repeat;
    background-size: 121px auto;
}
background: url(../images/hotel.png) no-repeat bottom center;
.nav-items:nth-child(1) a {
    border: 0;
}

.nav-common:nth-child(1) .nav-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}

.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(../images/plane.png) no-repeat bottom center;
    background-size: 81px auto;
}

.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(../images/travel.png) no-repeat bottom center;
    background-size: 94px auto;
}
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
.nav-items:nth-child(1) a {
    border: 0;
}

.nav-common:nth-child(1) .nav-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}

.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(../images/plane.png) no-repeat bottom center;
    background-size: 81px auto;
}

.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(../images/travel.png) no-repeat bottom center;
    background-size: 94px auto;
}

复制代码

便利功能导航栏

  1. 使用ul,li标签结构
    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
复制代码
  1. 设置圆角及背景色
  2. 需要设置左右的外边距 margin: 0 4px;,同时body设置高度大一些,否则看不到底部了 height: 2000px;
  3. 引入flex布局,设置换行,实际高度根据内容撑开
.subnav-entry li {
    flex: 20%;
    flex-warp:warp;
}
复制代码
  1. li中放入a标签,两个span标签放入a中,第一个为图标,第二个为文字,设置主轴为y轴,侧轴居中
        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <spa>WIFI电话卡</spa>
            </a>
        </li>
复制代码
.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
复制代码
  1. 设置上边距及背景图标。
.subnav-entry-icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}
复制代码

广告部分

  1. 整体划分出一个盒子,再通过上下细分两个子盒子。
  2. 设置边距,四个方向 => margin: 4px;
  3. 左侧是一个图片,用h2标签,里面也将图片文字内容加入,这里主要方便搜索引擎搜索, 右侧用a标签可以点击,再放入图片,h2中的文字是不需要显示的,使它隐藏,用伪元素设置背景图片,因为是行内元素是看不到的,使用绝对定位即可。。
    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#">更多</a>
        </div>
    </div>
复制代码
.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
复制代码

页面底部

通过flex排列一下上下图片和文字css样式

.tool-cn {
    margin-bottom: 5px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
 
    align-items: center;
    justify-content: center;
}
 
.tool-cn .tool-cn-link {
    position: relative;
 
    flex: 1;
    color: #333;
    font-size: 12px;
 
    display: flex;
 
    align-items: center;
 
    justify-content: center;
 
    flex-direction: column;
    padding: 10px 0;
}
 
.tool-cn .tool-cn-link svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}