在线考试系统html页面结果,Node.js在线考试系统——页面布局(学生)

Node.js在线考试系统

1.布局总览

准备界面.jpg

答题界面.jpg

2.页面布局模块分析

1.navBar

页面中的导航栏

2.ready

考试前的准备界面,由三个部分组成

考试开始时间

考试倒计时

开始测试按钮

2.1 deltaTime

考试倒计时

2.2 startTest

开始测试按钮,时间到则允许开始考试

3.main

考试的主要界面,由四个部分组成

题目相关信息

题目内容

输入框

三个按钮

3.1questionInfo

题目相关信息,包括题目序号、题目分值、题目描述

3.2QuestionDetail

题目内容

3.3inputTe

答案输入框

3.4submit

由三个按钮组成,分别为切换到上一题、提交、切换到下一题

4.testInfo

考试相关信息,由两个部分组成

欢迎信息,例:Welcome!TOM!

题目编号,点击可跳转到相应题目

3.页面布局代码

准备界面

//省去html和body

Online Test Site

For Student

考试10:00开始

Go

//button的样式用的是Buttons这个库

html{

height: 100%;

}

body{

margin: 0;

font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

height: 100%;

-webkit-background-size: cover;

background-size: cover;

position: relative;

}

.navBar{

position: absolute;

top: 0;

height: 80px;

background: #FF6600;

display: flex;

justify-content: space-around;

z-index: 1;

min-width: 100%;

}

.navBar-Content{

width: 1000px;

height: inherit;

display: flex;

align-items: center;

justify-content:space-between;

}

.navBar-Content span{

color: #ffffff;

font-weight: 900;

font-size: 20px;

}

.bc{

display: flex;

width: 100%;

position: relative;

flex-direction: column;

height: 100%;

background: url(/images/bizhi1.jpg) no-repeat center;

min-width:1000px;

justify-content: space-around;

min-height: 800px;

}

.ready{

width: 300px;

height: 300px;

background: rgba(0,102,255,0.5);

align-self: center;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-around;

}

.ready span{

color: #ffffff;

font-size: 20px;

}

答题界面

第一题

分值:20分

题目描述:

上一题

Submit',

下