微信小程序在线考试系统 毕业设计（2）分类

wxml代码

<view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">前端基础课</view> <navigator class="qukuai_you" url="/pages/shipin/index2" >所有考试>></navigator> </view> <view class="fenlei"> <navigator class="fenlei_list" url="/pages/shipin/index2" >HTMl</navigator> <navigator class="fenlei_list" url="/pages/shipin/index2" >CSS</navigator> <navigator class="fenlei_list" url="/pages/shipin/index2" >Javascript</navigator> <navigator class="fenlei_list" url="/pages/shipin/index2" >其他</navigator> </view> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">JS系列课</view> <view class="qukuai_you">所有考试>></view> </view> <view class="fenlei"> <view class="fenlei_list">Vue.js</view> <view class="fenlei_list">Uni-app</view> <view class="fenlei_list">Javascript</view> <view class="fenlei_list">其他</view> </view> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">微信小程序</view> <view class="qukuai_you">所有考试>></view> </view> <view class="fenlei"> <view class="fenlei_list">微信小程序</view> <view class="fenlei_list">其他</view> </view> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">WEB服务器端</view> <view class="qukuai_you">所有考试>></view> </view> <view class="fenlei"> <view class="fenlei_list">ASP</view> <view class="fenlei_list">PHP</view> <view class="fenlei_list">JAVA</view> <view class="fenlei_list">Go语言</view> <view class="fenlei_list">Python</view> <view class="fenlei_list">其他</view> </view> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">数据库</view> <view class="qukuai_you">所有考试>></view> </view> <view class="fenlei"> <view class="fenlei_list">Mysql</view> <view class="fenlei_list">Sql Server</view> <view class="fenlei_list">其他</view> </view> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">移动开发</view> <view class="qukuai_you">所有考试>></view> </view> <view class="fenlei"> <view class="fenlei_list">H5</view> <view class="fenlei_list">跨平台开发</view> <view class="fenlei_list">微信开发</view> <view class="fenlei_list">其他</view> </view>

wxss代码

/* pages/shu/index.wxss */ .chaxun{ background-color:#f2f2f2; display: flex; margin: 5px; padding: 5px; border-radius: 5px; align-items: center; } .chaxun_zuo{ padding-left: 15px; flex-grow: 1; } .chaxun_you{ border-radius: 0px; background-color: orange; color: white; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .qukuai{display: flex;align-items:center;background-color: #f9f9f9;} .qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;} .qukuai_zhong{font-size: 16px; flex-grow: 1;color: rgb(13, 163, 233);} .qukuai_you{font-size: 16px; color: gray;padding-right: 10px;} .fenlei{ display: flex; flex-wrap: wrap; font-size: 14px; } .fenlei_list{ width: 25%; padding: 10px 0px 10px 10px; box-sizing: border-box; font-size: 16px; }