安卓携程首页标签切换携程界面

最编程 2024-04-11 08:45:25

...

一、整体分析

二、具体样式实现

1、全局样式设置

2、搜索栏

3、游玩导航栏

4、主要功能导航栏

5、便利功能导航栏

6、广告部分

7、页面底部

三、完成效果

四、总结

一、整体分析

这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分

android 携程首页标签切换携程界面_css

android 携程首页标签切换携程界面_ico_02

二、具体样式实现

1、全局样式设置

导入normalize.css并设置一下body

android 携程首页标签切换携程界面_css_03

2、搜索栏

<div class="short-search">
        <div class="search">
            <p>搜索:目的地/酒店/景点/航班号</p>
        </div>
        <div class="user">
            <span class="user-icon"> </span>
            <span>我 的</span>
        </div>
    </div>

通过fixed定位固定搜索栏，保证导航栏位置始终在页面上方

通过精灵图在css里设置搜索框需要的图标

.search-index {
    position: fixed;
    left: 50%;
    z-index: 12;
    width: 100%;
    max-width: 540px;
    transform: translateX(-50%);
    padding-left: 12px;
    box-sizing: border-box;
    display: flex;
    /* align-items: center; */
}

.search-index .search-index-box {
    margin-top: 5px;
    height: 28px;
    line-height: 24px;
    padding: 2px 5px;
    border-radius: 15px;
    background-color: #fff;
    color: #666;
    flex: 1;
    box-sizing: border-box;
    position: relative;
}


.search-index .search-index-box span {
    padding-left: 35px;
}

.search-index .search-index-box span:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 100%;
    overflow: hidden;
    background: url(../images/home-common-sprite2x@v7.15.png) 15px 7px no-repeat;
    background-size: 21px auto;
    content: "";
}

.search-index .notice-myctrip {
    width: 51px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
    line-height: 1;
    box-sizing: border-box;
    padding-right: 4px;
}

.search-index .notice-myctrip:before {
    content: "";
    width: 22px;
    height: 22px;
    background: url('../images/home-common-sprite2x@v7.15.png') 1px -36px no-repeat;
    background-size: 21px auto;
    margin-bottom: 1px;
    display: block;
}

3、游玩导航栏

这个用精灵图实现就比较简单，先使用display:flex开启flex布局然后设置好一个的li让图片和文字上下排列，接下来就通过background-position修改一下其他图片的位置就可以了。

<!-- two  -->
  <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;
}

4、主要功能导航栏

android 携程首页标签切换携程界面_ico_04

这个看着需要设置很多很复杂但是通过flex布局的思路完成其实发现没有那么困难

可以看到他可以分成上中下三个flex布局，每一个内容只不过是颜色和文字有一些变化

那么首先定义上面的布局然后把他复制两遍重新定义一下对应的类，文字修改一下就可以了

最开始没有理解按钮后面的背景，后来发现就是给对应的按钮加一个background-image

<!-- three -->
  <div id="nav" class="nav-entry grid-nav">
    <div class="grid-nav-common grid-nav-hotel">
      <a id="c_hotel" class="grid-nav-items grid-nav-items-hotel" href="#">
        <span>酒店</span>
      </a>
      <a id="c_hotel_inn" class="grid-nav-items grid-nav-items-minsu" href="#">
        <span>民宿·客栈</span>
      </a>
      <a id="c_package_b" class="grid-nav-items grid-nav-items-jhj" href="#">
        <span class="grid-nav-jhj">
          <span class="grid-nav-jhj-text">机票/火车票+酒店
            <span class="grid-nav-item-tag">方便又便宜</span>
          </span>
        </span>
      </a>
    </div>

    <div class="grid-nav-common grid-nav-flight">
      <a id="c_flight" class="grid-nav-items grid-nav-items-flight" href="#"><span>机票</span></a>
      <a id="c_train_ticket" class="grid-nav-items grid-nav-items-train" href="#"><span>火车票</span></a>
      <a id="c_bus_ticket" class="grid-nav-items" href="#"><span>汽车·船票</span></a>
      <a id="c_car" class="grid-nav-items" href="#"><span>专车·租车</span></a>
    </div>

    <div class="grid-nav-common grid-nav-travel">
      <a id="c_vacation" class="grid-nav-items grid-nav-items-travel" href="#"><span>旅游</span></a>
      <a id="c_crh_travel" class="grid-nav-items grid-nav-items-dingzhi" href="#"><span>高铁游</span></a>
      <a id="c_cruise" class="grid-nav-items" href="#"><span>邮轮游</span></a>
      <a id="c_custom" class="grid-nav-items" href="#"><span>定制游</span></a>
    </div>
  </div>

/* three */
.grid-nav {
    margin: 0 12px 1px;
    border-radius: 8px;
    overflow: hidden;
}

.grid-nav .grid-nav-common.grid-nav-hotel {
    background: linear-gradient(to right, #fa5956, #fb8650 54%);
}

.grid-nav .grid-nav-common {
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    color: #fff;
    border-bottom: 1px solid #fff;
}



.grid-nav .grid-nav-common .grid-nav-items {
    border-left: 1px solid #f2f2f2;
    box-sizing: border-box;
    color: #fff;
    padding: 1.6rem 0;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: left bottom;
    font-size: 14px;
    line-height: 1;
    width: 23%;
}

.grid-nav .grid-nav-common .grid-nav-items span {
    height: 14px;
}

a {
    text-decoration: none;
}


.grid-nav .grid-nav-common .grid-nav-items:first-child {
    padding-left: 12px;
    justify-content: flex-start;
    background-position: right bottom;
    width: 31%;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-hotel {
    background-image: url('../images/grid-nav-items-hotel@v7.15.png');
    background-size: 73px auto;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-minsu {
    background-image: url('../images/grid-nav-items-minsu@v7.15.png');
    background-size: 37px auto;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-jhj {
    flex: 0 1 46%;
    background: linear-gradient(to right, #ffbc49, #ffd252);
    padding: 0;
    width: 47%;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-jhj .grid-nav-jhj {
    padding: 1.6rem 0;
    background: url('../images/grid-nav-items-jhj@v7.15.png') right bottom no-repeat;
    background-size: 86px auto;
    text-align: center;
    position: relative;
    width: 100%;
    color: #a05416;
    display: block;
}

.grid-nav .grid-nav-common .grid-nav-items .grid-nav-item-tag {
    color: #fff;
    font-size: .63rem;
    background: #f54c45;
    border-radius: 7px 7px 7px 0;
    position: absolute;
    top: -14px;
    right: 0;
    padding: 2px 5px;
    line-height: 1;
}


.grid-nav .grid-nav-common.grid-nav-flight {
    background: linear-gradient(to right, #4b8fed, #53bced);
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-flight {
    background-image: url('../images/grid-nav-items-flight@v7.15.png');
    background-size: 79px auto;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-train {
    background-image: url('../images/grid-nav-items-train.png');
    background-size: 37px auto;
}

.grid-nav .grid-nav-common.grid-nav-travel {
    background: linear-gradient(to right, #34c2aa, #6cd557);
    border-bottom: 0;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-travel {
    background-image: url('../images/grid-nav-items-travel@v7.15.png');
    background-size: 94px auto;
    border-bottom-left-radius: 8px;
}

.grid-nav .grid-nav-common .grid-nav-items.grid-nav-items-dingzhi {
    background-image: url('../images/grid-nav-items-dingzhi@v7.15.png');
    background-size: 61px auto;
}

5、便利功能导航栏

android 携程首页标签切换携程界面_html_05

这部分的布局使用li20%就可以，相对不是很难，还是通过精灵图实现，在每个导航按钮中使用了 flex 让文字和图片上下排列其他的改变图片的位置就可以，在旅拍按钮上添加一个内容

<!-- fore  -->
  <ul class="subnav-entry">
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-travel"></span>
        <span>*行</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-wifi"></span>
        <span>WiFi电话卡</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-insurance"></span>
        <span>保险·签证</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-shopping"></span>
        <span>换钞·购物</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-guide"></span>
        <span>当地向导</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-flight"></span>
        <span>特价机票</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-card"></span>
        <span>礼品卡</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-creditCard"></span>
        <span>申卡·借钱</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-photograph"><span class="subnav-new-tag">NEW</span></span>
        <span>旅拍</span></a>
    </li>
    <li>
      <a href="#"><span class="subnav-icon subnav-icon-more"></span>
        <span>更多</span></a>
    </li>
  </ul>

/* fore  */
.subnav-entry {
    overflow: hidden;
    margin: 0 12px 12px;
}

body,figure,h1,h2,h3,html,li,nav,p,ul {
    padding: 0;
    margin: 0;
}

.subnav-entry li {
    width: 20%;
    float: left;
}

.subnav-entry li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    font-size: .63rem;
    color: #222;
    line-height: 1;
    position: relative;
}

.subnav-entry li .subnav-icon {
    width: 28px;
    height: 28px;
    background-image: url('../images/un_ico_subnav2x@v7.152.png');
    background-size: 28px auto;
    background-repeat: no-repeat;
    margin-top: .63rem;
    margin-bottom: .31rem;
    display: block;
}

.subnav-entry .subnav-icon-travel {
    background-position: 0 0;
}

.subnav-entry .subnav-icon-wifi {
    background-position: 0 -28px;
}

.subnav-entry .subnav-icon-insurance {
    background-position: 0 -56px;
}

.subnav-entry .subnav-icon-shopping {
    background-position: 0 -84px;
}

.subnav-entry .subnav-icon-guide {
    background-position: 0 -112px;
}

.subnav-entry .subnav-icon-flight {
    background-position: 0 -139px;
}

.subnav-entry .subnav-icon-card {
    background-position: 0 -168px;
}

.subnav-entry .subnav-icon-creditCard {
    background-position: 0 -196px;
}

.subnav-entry .subnav-icon-photograph {
    background-position: 0 -224px;
    position: relative;
}

.subnav-entry .subnav-icon-more {
    background-position: 0 -252px;
}

.subnav-entry li .subnav-new-tag {
    position: absolute;
    font-size: 8px;
    color: #fff;
    background: linear-gradient(to right, #f94242, #ffa25f);
    border-radius: 7px;
    padding: 2px 5px;
    top: -2px;
    right: -20px;
}

6、广告部分

分为头部和主体部分。主体部分使用flex布局做，两个为一组，第一排和后两排修改一下，内容是通过图片填充。

<!-- five  -->
  <div class="sales-box sales-huodong" id="js-activity-wrapper">
    <div class="sales-hd">
      <h2 class="title title-huodong">热门活动<i class="icon-gg"></i></h2>
      <a class="button-gradient">获取更多福利</a>
    </div>
    <div id="js-activity-list">
      <div class="sales-bd">
        <div class="row">
          <div class="col col-50 js-activity-item-one" id="js-activity-btn1">
            <div class="img-one">
              <div class="img-two img1"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
          <div class="col col-50 js-activity-item-one" id="js-activity-btn2">
            <div class="img-one">
              <div class="img-two img2"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-50 js-activity-item" id="js-activity-btn3">
            <div class="img-one">
              <div class="img-three img3"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
          <div class="col col-50 js-activity-item" id="js-activity-btn4">
            <div class="img-one">
              <div class="img-three img4"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-50 js-activity-item" id="js-activity-btn5">
            <div class="img-one">
              <div class="img-three img5"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
          <div class="col col-50 js-activity-item" id="js-activity-btn6">
            <div class="img-one">
              <div class="img-three img6"></div>
            </div>
            <div class="gg-one">
              <span class="gg-two">广告</span>
            </div>
          </div>
        </div>
        <div style="display: none;" id="js-activity-btn_more"></div>
      </div>
    </div>
    <div id="js_load_hot" class="loadImg-layer-box" style="display: none;">
      <i class="i-loading-imgVal"></i>
    </div>
  </div>

7、页面底部

还是通过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;
}

三、完成效果

android 携程首页标签切换携程界面_ico_06

android 携程首页标签切换携程界面_html_07

四、总结

感觉到使用flex布局确实比较方面，像是以前想要实现一个什么居中对齐，上下排列什么的都要设置半天，去查找和调整，有时还会造成奇怪的bug'，这次确实方便了许多。还有就是理解到了精灵图的便利性，否者一些图片多了不光换起来麻烦还难找，这样调整一下位置就可以了。align-items: center;和 justify-content: center;也很好用，避更便捷有效。还是要在以后的任务中多加练习，好可以熟练的使用。

上一篇：飞猪买机票赚佣金是真的吗？订机票赚佣金平台靠谱吗

下一篇：开源节流，从小羊毛开始