效果圖

Wxml程式碼

<view class="page">

    <view class="page__hd">

        <view class="page__title">Article文章的排版佈局</view>

        <view class="page__desc">我是文章的描述資訊，這個章節主要講解佈局要使用哪些wxss的元素</view>

    </view>

    <view class="page__bd">

        <view class="weui-article">

            <view class="weui-article__h1">大標題</view>

            <view class="weui-article__section">

                <view class="weui-article__title">章標題</view>

 

                <view class="weui-article__section">

                    <view class="weui-article__h3">1.1 節標題</view>

                    <view class="weui-article__p">

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat.

                    </view>

                    <view class="weui-article__p">

                        <image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" />

                        <image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" />

                    </view>

                </view>

               

                <view class="weui-article__section">

                    <view class="weui-article__h3">1.2 節標題</view>

                    <view class="weui-article__p">

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                    </view>

                </view>

 

            </view>

        </view>

    </view>

</view>
 

歡迎大家學習我的視訊教程：微信小程式-WeUI介面佈局設計入門到精通