码迷,mamicode.com
首页 > 微信 > 详细

微信小程序学习-样式

时间:2020-04-27 19:24:18      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:play   size   ges   方向   wxs   sheet   border   尺寸   部分   

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;

}

 

微信小程序学习-样式

标签:play   size   ges   方向   wxs   sheet   border   尺寸   部分   

原文地址:https://www.cnblogs.com/xiao-apple36/p/12788678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!