《微信小程序开发从入门到实战》学习十三

第三章 开发第一个小程序

3.2 开发投票小程序的首页

3.2.2 开发初始页面布局

在首页加单选和多选投票

pages/index/index.wxml:

<view class="container">

<view class="btn">

  单选投票

</view>

<view class="btn">

  多选投票</view>

</view>

在pages/index/index.wxss添加页面样式美化：

.container {

  justify-content: center; /* 在布局方向上居中 */

}

.btn {

  margin:  20rpx;

  padding: 10rpx;

  border: 1rpx solid #26AB28;

  border-radius: 20rpx; /* 设置按钮边框四个角的圆角半径*/

  text-align: center;

  color: #26AB28;

}

预览效果 如下 ：