微信小程序学习-样式

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

WXSS 具有 CSS 大部分特性,与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

微信小程序学习-样式

 

 

 微信小程序学习-样式

微信小程序学习-样式

 

举例:

/* pages/my/my.wxss */
.menu{
  display: flex;
  flex-direction: row; /*规则主轴方向*/
  align-items: flex-start; /*副轴方向排列*/
  justify-content: space-around; /*主轴方向排列*/
  border: 2rpx solid #ddd;
  height: 200rpx

}
.my-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.c1{
  color: red
}
.menu .item{
  display: flex;
  flex-direction: column;
  align-items: center; /*副轴方向排列*/

}

.auction .items {
  display: flex;
  flex-direction: column;
}

.auction .items .title{
  font-size: 48rpx;
  font-weight: 500;

}

.auction .items .tips{
  display: flex;
  flex-direction: row;
  margin: 10rpx;
  justify-content: space-between;
  font-size: 30rpx;
  color: #8c8c8c;

}

 

微信小程序学习-样式

上一篇:(十二)微信小程序:星星处理


下一篇:python 全局变量