第三章 开发第一个小程序

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添加页面样式美化：

/* 为class为container的组件添加样式
*/
.container {
  display: flex; /* 使用 flex布局 */
  flex-direction: column;/* 设置布局方向为纵向 */
  justify-content: center; /* 在布局方向上居中 */
} 
/* 为class为btn的组件添加样式
*/
.btn {
  margin:  20rpx;
  padding: 10rpx;
  border: 1rpx solid #26AB28;/* 绿色*/
  border-radius: 20rpx; /* 设置按钮边框四个角的圆角半径*/
  text-align: center;
  color: #26AB28;
}

预览效果 如下 ：

?