微信小程序UI------实现携程首页顶部的界面（弹性布局）

今天写了一个携程界面的UI，利用H5的弹性盒子来实现，学过H5弹性盒子的，来看是比较方便的，因为CSS代码都差不多。

可以看看这篇博客 快速使用CSS 弹性盒子

效果图如下：

image

主要是携程首页的四个模块；

代码：

    


        
            
                酒店
            
            
                海外酒店
                团购
                特价酒店
                名宿-客栈
            
        



        
            
                机票
            
            
                火车票-抢票
                汽车票-船票
                特价机票
                专车
            
        



        
            
                旅游
            
            
                目的地攻略
                邮轮旅行
                周边游
                定制旅行
            
        



    
            
                玩乐
            
            
                美食林
                购物
                周边美食
                周边好玩
            
        

    

CSS代码

.page__bd{
    padding:0 10rpx;
}

.section__nav{
    display:flex;
    background:#FF697A;
    height:100px;
    color:#fff;
    margin-bottom:10rpx;
}

.left{
    width:33.33%;
    font-size:14px;
}

.border__right{
    border-right:1px solid #fff;
}

.border__bottom{
    border-bottom:1px solid #fff;
}

.right{
    width:66.67%;
    flex-wrap:wrap;
}

.left,.right{
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}

.item{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    height:50px;
    font-size:14px;
}

一个简单的小案例，界面练习，和H5的弹性盒子相同。

源码点击下载
https://git.oschina.net/zhangqie/wechat-applet-basics/tree/ctrip-ui/