【IT之路】微信小程序之美化

web页面可以使用css样式表来美化。微信小程序页面模块也可以使用样式。相关的样式文件后缀为.wxss

下面我们看下index模块如何给按钮使用样式

一、编写css样式

在index.wxss文件中添加如下css样式代码

/**index.wxss**/


.resultData {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
  /**设置字体颜色为**/
  color: red;
}

.btn {
  margin-top: 200px;
  /**设置按钮颜色为蓝色**/
  background-color: blue;
  /**设置字体颜色为白色**/
  color: white;
}

二、样式的应用

给index页面添加样式。修改index.wxml文件，添加class属性，将css样式应用到button和view中

 
  
  test
  
  
    {
    {resultData}}
  

三、添加样式后显示效果