pc端考试答阅静态页面【打分】

于 2022-03-24 14:53:39 发布
阅读量628 收藏 1
点赞数
分类专栏： 前端静态页面 文章标签： css html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leijiang0504/article/details/123710487
版权

这里是属于静态数据页面，直接用就可以了

先看一下页面

 

 下面是代码部分，直接用就行，但是js可能你们没用，所以selset选择你们自己样式需要调整下


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %>
    <base href="<%=basePath%>"></base>
    <meta charset="UTF-8">
    <title>考试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="js/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="box">
    <label class="boxtext">沐卿゚-前端考试班试卷</label>
    <label style="margin-top: 20px;font-size: 14px;display: inline-block;color:rgba(102, 102, 102, 1);" >考试时长：45分钟</label>
    <label style="margin-top: 20px;font-size: 14px;display: inline-block;color:rgba(102, 102, 102, 1);margin-left: 32px" >用时：40:32:17</label>
    <label style="margin-top: 20px;font-size: 14px;display: inline-block;color:rgba(102, 102, 102, 1);margin-left: 32px" >达标分数：60分</label>
    <label style="margin-top: 20px;font-size: 14px;display: inline-block;color:rgba(102, 102, 102, 1);margin-left: 32px" >考试总分数：100分</label>
    <label style="margin-top: 20px;font-size: 14px;display: inline-block;color:rgba(102, 102, 102, 1);margin-left: 32px" >
        考试得分：
    </label>
<%--    考试试题--%>
    <div class="banner">
        <div style="margin-left: 15px;padding-top: 20px">
            <i style="width: 3px;height: 12px;background-color: rgba(0, 172, 156, 1);display:inline-block;"></i>
            <i style="font-style: normal;font-weight: bold;margin-left: 4px;color: rgba(0, 172, 156, 1)">以下为填空题，一共5题，每题2分，合计10分</i>
            <div style="position: relative">
                <label style="display: block;font-weight: bold;margin-top: 28px">1.阐述清楚浮动的几种方式。</label>
                <label style="display: block;margin-top: 15px;font-size: 14px">1、父级div定义 height；2、父级div定义 overflow:hidden；3、结尾处加空div标签 clear:both。</label>
                <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                    <div class="layui-inline layui-show-xs-block">
                        <select name="city" lay-verify="required">
                            <option value="">选择分数</option>
                            <option value="0">8分</option>
                            <option value="1">20分</option>
                        </select>
                    </div>
                </form>
                <div style="width: 100%;height: 40px;background-color: rgba(245, 245, 245, 1);margin-top: 10px">
                    <label style="display: block;line-height: 40px;margin-left: 10px;color:rgba(102, 102, 102, 1);">参考答案：1、父级div定义 height；2、父级div定义 overflow:hidden；3、结尾处加空div标签 clear:both。</label>
                </div>
            </div>
            <div style="position: relative">
               <label style="display: block;font-weight: bold;margin-top: 28px">2.请描述一下 cookies sessionStorage和localstorage区别。</label>
               <label style="display: block;margin-top: 15px;font-size: 14px">1、1.存储大小；2、丝光绿蝇；3、大头金蝇；4、巨尾阿丽蝇</label>
               <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                   <div class="layui-inline layui-show-xs-block">
                       <select name="city" lay-verify="required">
                           <option value="">选择分数</option>
                           <option value="0">10分</option>
                           <option value="1">20分</option>
                       </select>
                   </div>
               </form>
               <div style="width: 100%;height: 40px;background-color: rgba(245, 245, 245, 1);margin-top: 10px">
                  <label style="display: block;line-height: 40px;margin-left: 10px;color:rgba(102, 102, 102, 1);">参考答案：1、家蝇；2、丝光绿蝇；3、大头金蝇；4、巨尾阿丽蝇</label>
               </div>
           </div>
        </div>
<%--        简答题--%>
        <div style="margin-left: 15px;padding-top: 20px">
            <i style="width: 3px;height: 12px;background-color: rgba(0, 172, 156, 1);display:inline-block;"></i>
            <i style="font-style: normal;font-weight: bold;margin-left: 4px;color: rgba(0, 172, 156, 1)">以下为简答题，一共5题，每题2分，合计10分</i>
            <div style="position: relative">
                <label style="display: block;font-weight: bold;margin-top: 28px">1.蟑螂的生活史与蚊虫有什么不同？为什么？</label>
                <label style="display: block;margin-top: 15px;font-size: 14px;width: 66%">蟑螂的生活史为半变态即卵→幼虫→成虫 蚊虫的生活史为完全变态即卵→幼虫→蛹→成虫 蚊虫除蛹外其它虫期均在水中生成，而蟑螂各虫期均在陆地生存； 蚊虫有一个相对静止的蛹期；</label>
                <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                    <div class="layui-inline layui-show-xs-block">
                        <select name="city" lay-verify="required">
                            <option value="">选择分数</option>
                            <option value="0">10分</option>
                            <option value="1">20分</option>
                        </select>
                    </div>
                </form>
                <div style="width: 98%;height: auto;background-color: rgba(245, 245, 245, 1);margin-top: 10px;padding: 14px 0px">
                    <label style="display: block;margin-left: 10px;color:rgba(102, 102, 102, 1);padding-right: 10px;">参考答案：蟑螂的生活史为半变态即卵→幼虫→成虫 蚊虫的生活史为完全变态即卵→幼虫→蛹→成虫 蚊虫除蛹外其它虫期均在水中生成，而蟑螂各虫期均在陆地生存； 蚊虫有一个相对静止的蛹期；</label>
                </div>
            </div>
            <div style="position: relative">
                <label style="display: block;font-weight: bold;margin-top: 28px">2.请说出至少5种常用卫生杀虫剂药剂主要剂型</label>
                <label style="display: block;margin-top: 15px;font-size: 14px;width: 66%">乳油、可湿性粉剂、粉剂、气雾剂、颗粒剂、粉剂、水乳剂、烟剂、缓释剂</label>
                <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                    <div class="layui-inline layui-show-xs-block">
                        <select name="city" lay-verify="required">
                            <option value="">选择分数</option>
                            <option value="0">10分</option>
                            <option value="1">20分</option>
                        </select>
                    </div>
                </form>
                <div style="width: 98%;height: auto;background-color: rgba(245, 245, 245, 1);margin-top: 10px;padding: 14px 0px">
                    <label style="display: block;margin-left: 10px;color:rgba(102, 102, 102, 1);padding-right: 10px;">参考答案：乳油、可湿性粉剂、粉剂、气雾剂、颗粒剂、粉剂、水乳剂、烟剂、缓释剂</label>
                </div>
            </div>
        </div>
<%--        名词解析--%>
        <div style="margin-left: 15px;padding-top: 20px">
            <i style="width: 3px;height: 12px;background-color: rgba(0, 172, 156, 1);display:inline-block;"></i>
            <i style="font-style: normal;font-weight: bold;margin-left: 4px;color: rgba(0, 172, 156, 1)">以下为名词解析题，一共5题，每题2分，合计10分</i>
            <div style="position: relative">
                <label style="display: block;font-weight: bold;margin-top: 28px">1.布雷图指数</label>
                <label style="display: block;margin-top: 15px;font-size: 14px;width: 66%">“布雷图指数”是评价一个地区伊蚊密度的指标,也就是平均每百户内有伊蚊幼虫(孑孓)孳生的容器数。“布雷图指数”在5以下,则属于安全范围；如果该指数高于20，则意味着一旦有外部病例输入，就可能在该地区造成蚊媒传染病的流行。</label>
                <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                    <div class="layui-inline layui-show-xs-block">
                        <select name="city" lay-verify="required">
                            <option value="">选择分数</option>
                            <option value="0">10分</option>
                            <option value="1">20分</option>
                        </select>
                    </div>
                </form>
                <div style="width:98%;height: auto;background-color: rgba(245, 245, 245, 1);margin-top: 10px;padding: 14px 0px">
                    <label style="display: block;margin-left: 10px;color:rgba(102, 102, 102, 1);padding-right: 10px;">参考答案：“布雷图指数”是评价一个地区伊蚊密度的指标,也就是平均每百户内有伊蚊幼虫(孑孓)孳生的容器数。“布雷图指数”在5以下,则属于安全范围；如果该指数高于20，则意味着一旦有外部病例输入，就可能在该地区造成蚊媒传染病的流行。</label>
                </div>
            </div>
            <div style="position: relative">
                <label style="display: block;font-weight: bold;margin-top: 28px">2.蝇蛆病</label>
                <label style="display: block;margin-top: 15px;font-size: 14px;width: 66%">蝇蛆病是指蝇类的幼虫----蛆寄生在人体或动物体上引起的疾病</label>
                <form class="layui-form" action="" style="position: absolute;right: 15px;top: 0">
                    <div class="layui-inline layui-show-xs-block">
                        <select name="city" lay-verify="required">
                            <option value="">选择分数</option>
                            <option value="0">10分</option>
                            <option value="1">20分</option>
                        </select>
                    </div>
                </form>
                <div style="width: 98%;height: auto;background-color: rgba(245, 245, 245, 1);margin-top: 10px;padding: 14px 0px">
                    <label style="display: block;margin-left: 10px;color:rgba(102, 102, 102, 1);padding-right: 10px;">参考答案：蝇蛆病是指蝇类的幼虫----蛆寄生在人体或动物体上引起的疾病</label>
                </div>
            </div>
        </div>

<%--        提交确认--%>
        <div style="display: flex;justify-content: center;align-items: center;margin-top: 25px;padding-bottom: 10px">
            <a class="layui-btn  layui-btn-normal" style="background-color: rgba(0, 172, 156, 1);width: 200px"  >确认审批</a>

        </div>

    </div>
    <label style="display: block;width: 100%;height: 24px"></label>




</div>
</body>
</html>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
<style>
    body{
        background-color: rgba(241, 241, 241, 1);
    }
    .box {
        width: 90%;
        margin-left: 5%;
        height: auto;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    .boxtext {
        display: block;
        width: 100%;
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-weight: bold;
        font-size: 20px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);

    }
    .banner{
        margin-top: 10px;
        width: 100%;
        height: auto;
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
    }
</style>

沐卿゚
关注
专栏目录
从苏宁电器到卡巴斯基（第二部）第35篇：我当高校教师的这几年 XI
Gleam的专栏
04-23 155
在X高校，由于我并不是纯粹的计算机类专业出身，因此多多少少还是会受到一些歧视的。 最开始就是在面试的时候，负责面试的一些老师反对我这样一个本科学营销的人来当老师，若不是院长力排众议，我想我的人生就会走向另外一条路了。而我入职进来之后，除了需要负责日常的教学工作之外，我还需要帮助学院做一些开发工作。因为学院也是有自己的项目的，以网站的形式呈现，分为PC端、安卓端等，我这边主要负责基于H5的PC端和移动端的前端开发。
在线答题系统（服务端+客户端（pc端））
07-13
本系统实现了在线答题系统，包括答题系统的后台管理系统，可以自由添加题目选项信息，客户端菜品H5页面，Ajax提交和获取数据，具体说明请看：https://www.jianshu.com/p/1b2ca978c50b 重新开放下载
web版 在线考试模版静态页面
03-22
web版 在线考试模版静态页面。 支持单选多选的答题样式，写好的js，点题目自动聚焦，带有计时器 HTML JS 单选 多选 计时器
在线考试系统静态考试页面
03-07
在线考试系统静态考试页面
在线问答系统--静态页面布置
AAIT11的博客
08-27 758
在线问答系统–静态页面布置 1. 静态页面 该静态页面是仿照知乎页面进行仿写的，一些资料来源于网络。 **静态页面获取**：链接：https://pan.baidu.com/s/1bZpwRqPiIMYk1AEChfAj-w 提取码：56qk 将从网盘的中静态文件下载下来，将assets放在static目录下面，其他.html文件放置模板文件夹中templates 2. 渲染模板 app.py from Flask import flask，render_template app = Flask(__n
考试系统
FDDFKJJHJ的博客
09-20 116
题目 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>题目</title> </head> <body> <form action="daan.jsp" method="post" name="form1"> 单选题<br> 1.民族问题产生的基本原因
网络考试系统
06-30
《网络考试系统的构建与应用》 网络考试系统，顾名思义，是利用互联网技术实现的一种新型考试方式，它打破了传统纸质考试的局限性，为教育机构、企事业单位提供了便捷、高效、安全的在线考核解决方案。这个系统的...
基于java的在线考试系统设计(含源文件)
【完整】
02-27 1万+
欢迎添加微信互相交流学习哦！ 项目源码：https://gitee.com/oklongmm/biye 摘 要 本系统是一个基于java的在线考试系统。它的用户由学生、教师和系统管理员组成。学生登陆系统可以进行在线测试和成绩查询。当学生登陆时，系统会随机地为学生选取试题组成考卷。当学生提交考卷后，系统会自动批改客观题，并将试卷提供给教师查看和提醒教师对试卷主观题进行修改。待教师修改完试卷后，系统会自动生成考生成绩和分数段统计信息。学生可以查询自己的成绩信息和试卷，以便更好地了解自己的学习情...
信息安全工程师第二版考试总结+笔记
热门推荐
IT技术
11-29 2万+
信息安全工程师第二版考试总结+笔记
在线考试模版静态页面
11-26
支持单选多选的答题样式，写好的js，点题目自动聚焦，带有计时器
在线考试答题页面模板
04-18
模拟在线考试答题页面模板，考题静态页面展示，单选和多选
在线考试系统（网页版）
04-14
数据库存储试题，java实现功能函数，jsp实现页面显示，完整的实现了在线考试系统的一系列功能
在线考试系统源代码（asp)
11-13
本系统开发环境是VS2005+SQL2005,使用三层架构，参考了多个考试系统而开发的,题型有单选题、多选题、判断题、填空题和问答题 系统特点： 1、多种题型，支持简答题，并且简单题的评阅需要管理手工评阅，其他提醒由计算机自动评阅 2、加入了权限管理，系统分为三种用户，管理员、教师和学生，管理员可以设定教师有哪些权限 3、“在用户管理”这一模块中，还增加了一个“重置密码”的功能，如果用户忘记密码了，管理员则可以把用户的密码重置 4、系统的登陆只用了一个界面，不用单选按钮就可以实现三种用户的智能登陆，会自动根据身份跳转到相应的页面 5、另外还用了Cookie实现了记住用户名，方便用户的输入 6、学生登陆成功后，可以修改个人密码，查看考试记录，也可以选择考试 7、界面美观方面，不同的权限显示不同的界面内容 系统后台功能： 个人信息管理 修改密码 部门信息管理 部门管理 用户信息管理 用户管理 权限设置 试卷制定维护 试卷制定（随机出题、人工出题） 试卷维护 用户试卷管理 试卷评阅 用户成绩 试题类别管理 单选题维护 多选题维护 判断题维护 填空题维护
html5在线语文考试问答手机页面代码
07-18
html5在线语文考试问答手机页面代码，基于jquery，适用于中小学考试使用。
前端layui带进度的答题效果
10-14
一个使用layui制作的单选小功能，带进度条和弹窗结果文本提示。可用于答题功能页面。
前端静态页面（初级）
天上下雨地上滑，自己跌倒你自己爬
01-22 6978
我们在网络上看到的大部分页面都可以用html+css制作出来，但缺点就是它是静态的，在没有与后端联系起来的情况下就是很简单的前端页面，这篇文章与那个登录注册主页面的实现是一个系列的，许多前端页面的格式都差不多，框架也是就那几个，一般写出几个典型的页面后其余的页面都可以在此基础上进行修改。 还是这个网址，我用起来确实还可以。 HTML 标签https://www.w3school.com.cn/tags/tag_html.asp 主页面 index.heml： <!DOCTYPE html
计算机考试新界面,提醒：3月计算机考试系统变了，赶紧看看！
weixin_29224309的博客
07-20 749
原标题：提醒：3月计算机考试系统变了，赶紧看看！重磅消息：2019年3月30日-4月1日全国计算机等级考试(NCRE)安排考试，据可靠消息，今年考试系统变了！小编整理了最新界面展示，帮助同学们率先熟悉考试环境，确保考试顺利进行。温馨提醒：考试系统升级之后，有一些变化，但变化不大，大家不必惊慌！平台题库的答题界面与升级后的考试系统也有一些区别，但区别不大，大家注意一下即可。2019年9月版题库会在6...
纯jsp页面《简单考试系统页面实现》：javaweb
s18764696599的博客
11-24 6088
这是一个简单的jsp实现考试页面的系统，可以简单的判断登录用户是否正确、试题答案是否正确、并且将分数统计出来 1.登录.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti...
在线考试界面前端代码
qq_47901934的博客
07-17 2996
<template> <section class="paper"> <HeaderTop :title="paperInfo.paperName" class="paper_header"> <a href="javascript:" slot="left" class="go_back" @click="toBack"> <i class="iconfont iconfanhui"></i>.
基于前端技术完成pc端静态页面的设计与实现
最新发布
10-23
基于前端技术完成PC端静态页面的设计与实现是一个具有挑战性的任务。 首先，设计阶段是非常重要的。我们需要通过分析需求和目标用户，确定页面的整体结构和布局。在设计过程中，需要考虑页面的可用性和用户体验，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐卿゚

帅哥美女多多支持哦，希望能帮助

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值