微信小程序UI------實現攜程首頁頂部的界面（彈性布局）

今天寫了一個攜程界面的UI，利用H5的彈性盒子來實現，學過H5彈性盒子的，來看是比較方便的，因為CSS代碼都差不多。

可以看看這篇博客 快速使用CSS 彈性盒子

效果圖如下：

　　

主要是攜程首頁的四個模塊；

 

代碼：

<view class="page">

    <view class="page__bd">


        <view class="section__nav">
            <view class="left border__right" bindtap="btn1"><!--bindtap 點擊事件 -->
                酒店
            </view>
            <view class="right">
                <view class="item border__right border__bottom" bindtap="btn2">海外酒店</view>
                <view class="item border__bottom" bindtap="btn3">團購</view>
                <view class="item border__right">特價酒店</view>
                <view class="item">名宿-客棧</view>
            </view>
        </view>



        <view class="section__nav" style="background:#3D98FF;">
            <view class="left border__right">
                機票
            </view>
            <view class="right">
                <view class="item border__right border__bottom">火車票-搶票</view>
                <view class="item border__bottom" >汽車票-船票</view>
                <view class="item border__right">特價機票</view>
                <view class="item">專車</view>
            </view>
        </view>



        <view class="section__nav" style="background:#44C522">
            <view class="left border__right">
                旅游
            </view>
            <view class="right">
                <view class="item border__right border__bottom">目的地攻略</view>
                <view class="item border__bottom" >郵輪旅行</view>
                <view class="item border__right">周邊游</view>
                <view class="item">定制旅行</view>
            </view>
        </view>



    <view class="section__nav" style="background:#FC9720">
            <view class="left border__right">
                玩樂
            </view>
            <view class="right">
                <view class="item border__right border__bottom">美食林</view>
                <view class="item border__bottom" >購物</view>
                <view class="item border__right">周邊美食</view>
                <view class="item">周邊好玩</view>
            </view>
        </view>

    </view>
</view>

 

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的彈性盒子相同。

  源碼點擊下載