搞个微信小程序002:个人信息

新建一个用于,和001中一样,然后,就改掉两个文件:

index.wxml:

XML 复制代码
<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:

css 复制代码
/**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要自己新建):

效果:

相关推荐
说私域23 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54587 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui