移动开发—详解flex布局之携程网首页案例制作（一）https://developer.aliyun.com/article/1383507
二、携程网制作
部分代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <title>携程在手，说走就走</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 搜索模块 --> <div class="search-index"> <div class="search"> 搜索：目的地/酒店/景点/航班号</div> <a href="#" class="user">我 的</a> </div> <!-- 焦点图模块 --> <div class="focus"> <img src="upload/focus.jpg" alt=""> </div> <!-- 局部导航栏 --> <ul class="local-nav"> <li> <a href="#" title="景点玩乐"> <span class="local-nav-icon1"></span> <span>景点 玩乐</span> </a> </li> <li> <a href="#" title="周边游"> <span class="local-nav-icon-icon2"></span> <span>周边游</span> </a> </li> <li> <a href="#" title="美食林"> <span class="local-nav-icon-icon3"></span> <span>美食林</span> </a> </li> <li> <a href="#" title="一日游"> <span class="local-nav-icon-icon4"></span> <span>一日游</span> </a> </li> <li> <a href="#" title="当地攻略"> <span class="local-nav-icon-icon5"></span> <span>当地攻略</span> </a> </li> </ul> <!-- 主导航栏 --> <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"> <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"> <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> <!-- 侧部分 --> <ul class="subnav-entry"> <li> <a href="#"> <span class="subnav-entry-icon-icon1"></span> <span>WiFi电话卡</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon2"></span> <span>保险签证</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon3"></span> <span>外币兑换</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon4"></span> <span>购物</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon5"></span> <span>当地导向</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon6"></span> <span>自由行</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon--icon7"></span> <span>境外玩乐</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon--icon8"></span> <span>礼品卡</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon--icon9"></span> <span>信用卡</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon-icon10"></span> <span>更多</span> </a> </li> </ul> <!-- 销售模块--> <div class="sales-box"> <div class="sales-hd"> <h2>热门活动</h2> <a href="#" class="more">获取更多福利</a> </div> <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 class="row"> <a href="#"><img src="upload/pic3.jpg" alt=""></a> <a href="#"><img src="upload/pic4.jpg" alt=""></a> </div> <div class="row"> <a href="#"><img src="upload/pic5.jpg" alt=""></a> <a href="#"><img src="upload/pic6.jpg" alt=""></a> </div> </div> </body> </html>
