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

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

   .b1{
  width:750rpx;
  height:300rpx;
  margin-bottom: 40rpx;
   background-color: white;
   border-style:6px solid #F5F5F5;
}
  .float{ 
  float:left;
   }  
1
2
3
4
5
6
7
8
9
10

.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;                     头像的宽度为240rpx
  height: 240rpx;                    头像的高度为240rpx
  margin: 16rpx 60rpx;               头像的外边距 分别16 60 16 60（可看margin那篇博客去了解）
}
.name{
  line-height: 60rpx;                     名字的距离边框的高度为60rpx
  width: 280rpx;                          名字的宽度
  height: 240rpx;                         名字的高度
  margin: 100rpx 50rpx;                   名字的外边距
  font-size: 96rpx;                       字体的大小
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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
}
1
2
3
4
5
6
7
8
9

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

.b3 {
    display: inline-block;
    width: 20px;
    margin-right: 5px;

}

.b3 image {
    width: 100%;
    height: 20px;
    vertical-align: -2px;
}
1
2
3
4
5
6
7
8
9
10
11
12