手把手教你搭建消防安全答题小程序-答题页

念无与为乐者,就让我手把手教你搭建知识竞答小程序吧。为啥你的UI界面感觉乱?好看的答题考试小程序,实在是太稀缺了。

手把手教你搭建消防安全答题小程序-答题页_第1张图片

软件架构:微信原生小程序+云开发
源码地址,获取源码,版本持续迭代中...

答题页布局



  1题
    共20
  
    
      【单选题】
      当灭火人员能够接近火源时,应迅速利用身边的灭火器材灭火,将火势控制在初期低温少烟阶段,使用的火灾扑救方法是()。
    
  
  
    
      
      
      
      
    
  
  
    
  
  
     meng674782630
  

答题页样式

/* pages/test/test.wxss */
page {
  background-color: #fff;
}
.page {
  padding: 20rpx;
}
.page__bd {
  padding: 20rpx;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
}
.toindex-btn {
  margin-top: 20rpx;
  display:inline-block;
  line-height:2.3;
  font-size:13px;
  padding:0 1.34em;
  color: red;
  float: right;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}

答题页效果图

手把手教你搭建消防安全答题小程序-答题页_第2张图片

好了,今天就写到这里。当前版本,先教大家页面布局与样式。下一个迭代会接入云开发,实现完整的答题小程序功能,敬请期待吧。

你可能感兴趣的:(前端)