微信小程序学习-样式

Posted 2021-02-21 一只小小寄居蟹

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;

}