小程序个人介绍页面开发

原创

菜菜有点菜

发布于 2024-09-12 13:31:17

2020

视图层

<view>
  <view class="top">
    <view class="user-img">
      <image src="/images/avatar.png"></image>
    </view>
  </view>

  <view class="menu">
    <view class="item">姓名：小丽</view>
    <view class="item">年龄：20</view>
    <view class="item">性别：女</view>
    <view class="item">特长：绘画、书法</view>
    <view class="item">爱好：编程</view>
  </view>
</view>

视图层由三个盒子构成。

接下来就是wxss，其实核心就是wxss样式的调整。这里必须熟练使用css

/**index.wxss**/
/* 头像区域的样式 */
.top {
  background: #3A4861;
  width: 100%;
  padding: 30rpx 0;
}
.top .user-img {
  width: 252rpx;
  margin: 0 auto;
 }
.top image {
  width: 252rpx;
  height: 252rpx;
  border-radius: 50%;
  border: 6rpx solid #777F92;
}
/* 详细信息区域的样式 */
.menu .item {
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 2rpx solid #ccc;
  padding: 0 40rpx;
  font-size: 34rpx;
}

最终效果：