视图层
代码语言：txt复制<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
代码语言：txt复制/**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;
}
最终效果：
