三、弹性布局菜单导航条

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>


    header {
      position: relative;
      width: 100%;
      height: 50px;
      background-color: #e1017e;
    }

    header .left{
      position: absolute;
      bottom: 0;
      left:0;
      width: 100px;
      height: 50px;
    }

    header .center{
      position: relative;
      width: 100%;
      height: 50px;
      background:url(../image/title_main.png);
      background-size: 74px 19px;
      background-position: center center;
      background-repeat: no-repeat;
    }
    header .right{
      position: absolute;
      bottom: 0;
      right:0;
      width: 40px;
      height: 50px;
      background:url(../image/membercenter.png);
      background-size: 30px 30px;
      background-position: center center;
      background-repeat: no-repeat;
    }

    header .left .arrow{
      position: absolute;
      bottom:21px;
      left: 11px;
      width: 13px;
      height: 8px;
      background:url(../image/arrow_down.png);
      background-size: 13px 8px;
      background-position: center center;
      background-repeat: no-repeat;
    }

    header .left .city{
      position: relative;
      width: 100%;
      height: 50px;
      padding-left: 27px;
      box-sizing: border-box;
      line-height: 50px;
      font-size: 14px;
      color: #fff;
      text-align: left;

    }

  nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-flex-flow:row;
    flex-flow: row;
    position: relative;
    width: 100%;
    height: 40%;
    background-color: #e1017e;
  }
  nav .menu{
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #fff;
    text-align: center;
  }

   nav .menu.selected{   //这里.menu.selected 两个元素之间不要有空格,不然不是同级元素
     font-size: 14px;
     color: #fff;
     font-weight: bolder;s;
   }

    </style>
</head>

<body>
      <header>
          <div class="left">
            <div class="arrow"></div>
            <div class="city">北京市</div>
          </div>
          <div class="center"></div>
          <div class="right"></div>
      </header>

      <nav>
          <div class="menu">水果</div>
          <div class="menu selected">食材</div>
          <div class="menu">零食</div>
          <div class="menu">牛奶</div>
          <div class="menu">蔬菜</div>
      </nav>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {

    };
</script>

</html>
三、弹性布局菜单导航条

猜你喜欢
