xiecheng

顶部搜索div.search-index

flex布局之输入框
参考 https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
父盒子display: flex;
左盒子flex: 1;
右盒子固定大小

焦点图模块div.focus

流式布局

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

宽度100%，高度不固定

局部导航ul.local-nav

<ul class="local-nav">
     <li>
         <a href="#" title="景点·玩乐">
             <span class="local-nav-icon-icon1"></span>
             <span>景点·玩乐</span>
         </a>
     </li>
     ...
</ul>
   
.local-nav {
  display: flex;
}
.local-nav li {
  flex: 1;
}
.local-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
 }

主导航nav

<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>
    ...
</nav>  
.nav-common {
  display: flex;
}
.nav-items {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nav-items a {
  flex: 1;
  text-align: center;  
}

侧导航ul.subnav-entry

<ul class="subnav-entry">
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    ...
</ul>
.subnav-entry {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0;
}
.subnav-entry li {
  /* 完全等比宽度,宽度为父盒子的20% */
  flex: 20%;
}
.subnav-entry a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

销售模块div.sales-box

<div class="sales-box">
    <div class="sales-bd">
        <div class="row">
            <a href="#">
                <img src="upload/pic1.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic2.jpg" alt="">
            </a>
        </div>
        ...
    </div>
</div>
.row {
  display: flex;
}

.row a {
  flex: 1;
}