2021微信小程序最新迷你首页样式布局_微信迷你网页

废话不多说 说多了放屁  上代码

HTML页面

<view class="container">
    <image class="avatar" src="/images/avatar/1.png"></image>
    <text class="motto">Hello, 七月</text>
    <view class="journey-container" bindtap="onTap" >
        <text class="journey"  >开启小程序之旅</text>
    </view>
</view>

css页面

.container{
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color:#b3d4db;
}
 
.avatar{
    width:200rpx;
    height:200rpx;
    margin-top:160rpx;
}
 
.motto{
    margin-top:100rpx;
    font-size:32rpx;
    font-weight: bold;
}
 
.journey-container{
    margin-top: 200rpx;
    border: 1px solid #405f80;
    width: 200rpx;
    height: 80rpx;
    border-radius: 5px;
    text-align:center;
}
 
.journey{
    font-size: