微信小程序在线考试系统 毕业设计（1）首页
2024-06-17 19:14:25
wxml代码
<view><!--广告图片 mode="widthFix" 设定高度随宽度自动变化--><image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="chaxun"><input class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="请输入关键字"></input><button class="chaxun_you" type="mini" form-type="submit" >查询</button>
</view>
<view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">最新资讯</view><navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=资讯中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'><image class='xinxi-icon' src='/img/news.png'></image><text class='xinxi-text'>06-19 八月份上架新试题目录通知</text><image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'><image class='xinxi-icon' src='/img/news.png'></image><text class='xinxi-text'>06-19 用户微信直接登录功能开通</text><image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'><image class='xinxi-icon' src='/img/news.png'></image><text class='xinxi-text'>06-19 关于违规会员处理的通知</text><image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator class="fenlei" url="/pages/shu/fenlei" open-type="switchTab">考 题 分 类</navigator><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">最近考题</view><view class="qukuai_you">所有</view>
</view>
<view class="zuixin"><view class="zuixin_kecheng"><navigator class="zuixin_kecheng_fengmian" url="/pages/tiku/kaoti_timu"><image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/01.jpg"></image></navigator><view class="zuixin_kecheng_biaoti">HTML入门考题</view><view class="zuixin_kecheng_xinxi"><view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view><view class="zuixin_kecheng_xinxi_you">免费</view></view></view><view class="zuixin_kecheng"><navigator class="zuixin_kecheng_fengmian" url="/pages/tiku/kaoti_timu"><image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/02.jpg"></image></navigator><view class="zuixin_kecheng_biaoti">HTML5入门考题</view><view class="zuixin_kecheng_xinxi"><view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view><view class="zuixin_kecheng_xinxi_you">免费</view></view></view><view class="zuixin_kecheng"><navigator class="zuixin_kecheng_fengmian" url="/pages/tiku/kaoti_timu"><image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/03.jpg"></image></navigator><view class="zuixin_kecheng_biaoti">CSS入门考题</view><view class="zuixin_kecheng_xinxi"><view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view><view class="zuixin_kecheng_xinxi_you">免费</view></view></view> <view class="zuixin_kecheng"><navigator class="zuixin_kecheng_fengmian" url="/pages/tiku/kaoti_timu"><image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="/tupian/04.jpg"></image></navigator><view class="zuixin_kecheng_biaoti">CSS3入门考题</view><view class="zuixin_kecheng_xinxi"><view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view><view class="zuixin_kecheng_xinxi_you">免费</view></view></view>
</view>
wxss代码
/* 广告图片*/
.ad01{ width: 100%; /* 宽度100%*/
}.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.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;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}.xinxi {display: flex;align-items: center;padding: 5px;border-bottom: 1px solid #f2f2f2;font-size: 14px;color: gray;}.xinxi-icon {width: 19px;height: 19px;}.xinxi-text {flex-grow: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.xinxi-arrow {width: 13px;height: 13px;}.chaxun{background-color:#f2f2f2;display: flex;margin: 10px;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;
}.fenlei{ background-color: orangered;text-align: center;padding: 7px; color: white; margin: 5px; border-radius: 5px;}.zuixin{ padding: 2px;display: flex; flex-wrap: wrap;}
.zuixin_kecheng{width: 48%;margin: 3px;padding: 3px;box-sizing: border-box;border:1px solid #f2f2f2;box-shadow: 1px 1px 2px gainsboro;color: gray;
}
.zuixin_kecheng_fengmian{width: 100%;
}
.zuixin_kecheng_fengmian_img{width: 100%;
}
.zuixin_kecheng_biaoti{font-size: 14px;
}
.zuixin_kecheng_xinxi{display: flex;align-items: center;
}
.zuixin_kecheng_xinxi_zuo{font-size: 12px;flex-grow: 1;
}
.zuixin_kecheng_xinxi_you{color: red;font-size: 14px;
}
微信小程序在线考试系统 毕业设计（1）首页相关推荐
- 微信小程序在线考试系统 毕业设计（6）会员首页
wxml代码 <!--头部信息--> <view class='toubu'><view class='toubu-zuo'><open-data type= ...
- 微信小程序在线考试系统 毕业设计（4）在线考试页面
wxml代码 <!--pages/tiku/kaoshi.wxml--><view class="biaoti">当前考试:HTML入门测试</vie ...
- 微信小程序在线考试系统 毕业设计（7）考试记录
wxml代码 <view class="jilu"><view class="jilu_biaoti"> <view class= ...
- 微信小程序在线考试系统 毕业设计（5）答题卡
wxml代码 <!--pages/tiku/kaoshi.wxml--> <view class="biaoti">当前考试答题卡:HTML入门测试< ...
- 微信小程序在线考试系统 毕业设计（3）题库列表
wxml代码 <navigator class="shijuan" url="/pages/tiku/kaoshi"><view class= ...
- 微信小程序在线考试系统+后台管理系统|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 精品微信小程序在线考试系统+后台管理系统|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- [精品毕设]微信小程序在线考试系统+后台管理|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.文档等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 基于微信小程序在线考试系统，利用微信小程序实现在线考试的设想开发，在线答题考试小程序开发分享
传统考试书籍成本高,损耗大,流通慢,淘汰率高.因此认为利用微信小程序的"用完即走,不占内存"的优势,实现在线考试系统,以提高考试资源的使用价值,适应"互联网+" ...
最新文章
- 新款华为手机，免费带回家
- SpringBoot响应Json数据乱码通过配置解决
- PAT_B_1055_Java(25分)
- 可变lambda_Lambda的Lambda（如果可选）
- CTFHUB 《基础认证》：burp使用，basic请求了解
- appium和airtest_关于Airtest自动化测试工具
- 一个10篇一作SCI博士的走心分享----宏组学研究之“道” (完整收藏版)！！
- 探究Lucene计算权重的过程
- 基于迁移学习的农作物病虫害检测方法研究与应用
- 网络安全行业全景图（2019年1月）
- SPSS缺失值处理【SPSS 009期】
- java参考文献大全
- synergy 控制客户端电脑很卡_Synergy 一套键鼠同时控制多台电脑的神器！超级方便！(开源免费，支持Win/Mac/Linux)...
- F280049C Enhanced Pulse Width Modulation
- 7.基本数据类型详细讲解-int/bool/str
- 新创公司如何建立优质的工程师到职流程
- linux scp文件传输
- Imagewarping变形算法研究---MLSR(Nonrigid image deformation using moving regularized least quares)
- java ascii 编码方式,Java 字符编码 ASCII、Unicode和UTF-8
- 什么手机抢票软件安全靠谱