微信小程序学习-样式

Posted 一只小小寄居蟹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序学习-样式相关的知识,希望对你有一定的参考价值。

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;

}

 

以上是关于微信小程序学习-样式的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序学习-样式

微信小程序怎么悬浮窗口

微信小程序基础

微信小程序基础

微信小程序文本组件text使用详解-微信小程序系统学习攻略

微信小程序文本组件text使用详解-微信小程序系统学习攻略