新建一个用于,和001中一样,然后,就改掉两个文件:
index.wxml:
<view>
<!-- 头像区域 -->
<view class="top">
<view class="user-img">
<image src="/images/tx.png"></image>
</view>
</view>
<!-- 详细信息区域 -->
<view class="menu">
<view class="item">姓名:中锋</view>
<view class="item">年龄:-9600</view>
<view class="item">性别:男</view>
<view class="item">特长:编程</view>
<view class="item">爱好:佛法,中医</view>
</view>
</view>
index.wxss:
/**index.wxss**/
/* 头像区域的样式 */
.top {
background: #0a87ec6e;
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;
}
当然,要添加好头像文件tx.png,放下images目录下(images要自己新建):
效果: