微信小程序开发实战第二版-黑马程序员

案例2-1个人信息

页面效果：

页面布局wxml：

<!--pages/test/test.wxml-->
<view>
<view class="top">
<view class="user-img">
<image src="../image/1.jpg"></image>
</view>
</view>
<view class="menu">
<view class="item">姓名：小丽</view>
<view class="item">年龄：21</view>
<view class="item">性别：女</view>
<view class="item">特长：绘画、书法</view>
<view class="item">爱好：编程</view>
</view>
</view>

具体样式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;
}

持续更新中…