3伸缩布局-携程旅行

最新推荐文章于 2021-08-07 19:36:40 发布

dreams_tomorrow

最新推荐文章于 2021-08-07 19:36:40 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/dreams_tomorrow/article/details/60969017

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>携程旅行</title>
<style>
  body {
   margin: 0;
   padding: 0;
   font: 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  }

  /*全局设置*/
  a {
   text-decoration: none;
  }

  img {
   width: 100%;
   height: auto;
   display: block;
  }

  .wrapper {
   min-width: 320px;
  }

  /*轮播图*/
  .banner {
   display: flex;
  }

  .banner a {
   flex: 1;
  }

  /*主体*/
  .main {
   padding: 5px;
  }

  /*导航*/
  .item {
   height: 90px;
   margin-bottom: 5px;
   display: flex;
   border-radius: 5px;
  }

  /*一级导航*/
  .pub {
   flex: 1;
  }

  /*二级导航*/
  .sub {
   flex: 2;
   display: flex;
   flex-wrap: wrap;
  }

  .sub a {
   width: 50%;
   height: 45px;
   text-align: center;
   line-height: 45px;
   border-left: 1px solid #FFF;
   border-top: 1px solid #FFF;
   color: #FFF;
   font-size: 14px;
   text-shadow: 0 2px 1px rgba(0,0,0,0.2);
   box-sizing: border-box;
  }

  .sub a:nth-child(-n+2) {
   border-top: 0 none;
  }

  .item:nth-child(1) {
   background-color: #ff697a;
  }

  .item:nth-child(2) {
   background-color: #3d98ff;
  }

  .item:nth-child(3) {
   background-color: #44c522;
  }

  .item:nth-child(4) {
   background-color: #fc9720;
  }

  .item:nth-child(4) .sub a {
   width: 33.333%;
  }

  .item:nth-child(4) .sub a:nth-child(-n+3) {
   border-top: 0 none;
  }

  /*其它部分*/
  .extra {
   display: flex;
  }

  .extra a {
   flex: 1;
  }

  .extra img {
   width: 100%;
  }

  /*底部导航*/
  footer nav {
   display: flex;
  }

  footer nav a {
   flex: 1;
   height: 44px;
   padding-top: 20px;
   text-align: center;
   line-height: 1;
   border-top: 1px solid #CCC;
   border-bottom: 1px solid #C2C2C2;
   font-size: 12px;
   color: #333;
   box-sizing: border-box;
  }

/*底部链接*/
  footer p {
   text-align: center;
   font-size: 12px;
   color: #999;
  }
  footer .link a {
   color: #666;
  }
</style>
</head>
<body>
<div class="wrapper">
  
  <header>
   
   <section class="banner">
    <a href="javascript:;">
     <img src="./images/banner.jpg">
    </a>
   </section>
  </header>
  
  <div class="main">
   
   <section 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>
   </section>
   
   <section class="extra">
    <a href="javascript:;">
     <img src="./images/extra_1.png">
    </a>
    <a href="javascript:;">
     <img src="./images/extra_2.png">
    </a>
   </section>
  </div>
  
  <footer>
   
   <nav>
    <a href="javascript:;">电话预订</a>
    <a href="javascript:;">下载客户端</a>
    <a href="javascript:;">我的</a>
   </nav>
   
   <div class="copyright">
    
    <p class="link">
     <a href="javascript:;">网站地图</a> |
     <a href="javascript:;">ENGLISH</a> |
     <a href="javascript:;">电脑版</a>
    </p>
    <p>©2015 携程旅行</p>
   </div>
  </footer>
</div>
</body>
</html>