微信小程序列表开发-个人中心界面-wxss(二)

微信小程序的wxss类似于css，是对页面样式的优化。
上篇讲了写个人中心的大概模板，这次把wxss里面详细讲一下。

   .b1{width:750rpx;height:300rpx;margin-bottom: 40rpx;background-color: white;border-style:6px solid #F5F5F5;
}.float{ float:left;}

.b1和.float是对获取微信头像和名字样式的修改

.b1{
width:750rpx; 设置这个盒子的宽度
height:300rpx; 高度
margin-bottom: 40rpx; 下外边距
background-color: white; 背景颜色为白色
border-style:6px solid #F5F5F5; 边框的样式边框线的宽度边框线为实线边框线为白色
}
.float{
float:left; float为框内的内容排序为从左向右排布，如果不加小程序默认为换行最后的结果就是头像在上面名字在下面
}
float：定义元素在哪个方向浮动。
这些代码是对获取到的微信头像和名字的样式进行修改

.head{overflow: hidden;                               border-radius:60%;                 设置对象使用圆角边框。取值为数字或者百分比。让边框百分之60变圆width: 240rpx;                     头像的宽度为240rpxheight: 240rpx;                    头像的高度为240rpxmargin: 16rpx 60rpx;               头像的外边距 分别16 60 16 60（可看margin那篇博客去了解）
}
.name{line-height: 60rpx;                     名字的距离边框的高度为60rpxwidth: 280rpx;                          名字的宽度height: 240rpx;                         名字的高度margin: 100rpx 50rpx;                   名字的外边距font-size: 96rpx;                       字体的大小
}

overflow:规定当内容溢出元素框时发生的事情
.b2是对这个盒子的整体样式的修改

.b2 {position: relative;                                 对元素进行定位。display: flex;                                      弹性盒子padding: 15px;                                      内边距 align-items: center;                                flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。（对齐弹性盒的各项元素）border-bottom: 1px solid #F5F5F5;        下边框的样式 宽度为1rpx  实线  边框颜色为白色background-color: white;                            盒子的背景颜色为白色padding-top: 20px;                                  盒子内边距为20px
}

.b3是对这个图片的样式修改的

.b3 {display: inline-block;width: 20px;margin-right: 5px;}.b3 image {width: 100%;height: 20px;vertical-align: -2px;
}

微信小程序列表开发-个人中心界面-wxss(二)相关推荐

微信小程序列表开发-个人中心界面(一)
先放个效果图让你们看一下是不是你们需要的,到时候会写几篇博客把里面的组件也讲一下 .wxml .wxss .js .json 我里面的引用的照片都放在image文件里的,image文件是放在pages ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
【微信小程序企业级开发教程】界面刷新获取新更新数据
在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...
微信小程序Megalo开发踩坑计-普通二维码绑定
原文首发于http://blog.yumengtao.top 首先简单说一下普通二维码绑定功能作用: 兼容线下已有的二维码能同时支持微信.支付宝小程序小程序启动传参微信小程序普通二维码资料支付 ...
微信小程序原生开发功能合集十二：编辑界面的实现
本章实现编辑界面的实现处理,包括各编辑组件的使用及添加数据保存数据流程的实现处理. 另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识.组件封装.常用接口组件使用及常用功能实现等内容 ...
微信小程序好看的个人中心界面之水波纹
正如下面所示,在基本信息卡片下方会一直有水波纹在流动,很适合放在个人中心界面,效果很好实现的基本原理:用一张水波纹的gif图片,设置为和背景图同样的色调,将水波纹设置为绝对定位,固定在下方,并且显示 ...
微信小程序云开发入门到放弃（二）WXML与WXSS
WXML与WXSS 相信通过前面的学习,大家对一个完整的小程序的文件结构有了一个大致的了解,对小程序的开发者工具也有了一定的认识,那这节我们来开始动手写一下小程序的代码. 编辑WXML文件我们在开发 ...
【微信小程序企业级开发教程】界面跳转方法总结
文章目录 1 wx.navigateTo(OBJECT) 2 wx.redirectTo(OBJECT) 3 wx.switchTab(OBJECT) 从跳转的方式(或说成打开新页面的方式)来说大致可 ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...

微信小程序列表开发-个人中心界面-wxss(二)

微信小程序列表开发-个人中心界面-wxss(二)相关推荐

最新文章

热门文章