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中
<!--index.wxml-->
<view class="container">
<view>
<button bindtap='bindtest' class="btn">test</button>
</view>
<view class="resultData">
<text >{{resultData}}</text>
</view>
</view>
三、添加样式后显示效果