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

最新推荐文章于 2024-06-23 12:03:26 发布

m0_59594264

最新推荐文章于 2024-06-23 12:03:26 发布

阅读量966

点赞数

分类专栏：小程序源码文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_59594264/article/details/121600062

版权

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

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: