111 lines
4.6 KiB
Plaintext
111 lines
4.6 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
|
<%@ include file="/WEB-INF/views/header.jsp" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>学生评教系统</title>
|
|
<style>
|
|
/* 全局样式 */
|
|
body {
|
|
font-family: Arial, sans-serif; /* 设置字体 */
|
|
background-color: #f0f2f5; /* 设置背景颜色 */
|
|
margin: 0; /* 移除默认外边距 */
|
|
padding: 20px; /* 设置内边距 */
|
|
}
|
|
h1 {
|
|
text-align: center; /* 标题居中 */
|
|
color: #2c3e50; /* 标题颜色 */
|
|
}
|
|
.container {
|
|
max-width: 800px; /* 设置容器最大宽度 */
|
|
margin: 0 auto; /* 居中对齐 */
|
|
background: white; /* 背景颜色 */
|
|
padding: 20px; /* 内边距 */
|
|
border-radius: 10px; /* 圆角 */
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
|
|
text-align: center; /* 文本居中对齐 */
|
|
}
|
|
/* 表单样式 */
|
|
.form-group {
|
|
margin-bottom: 15px; /* 表单组之间的间距 */
|
|
text-align: center; /* 表单组内容居中对齐 */
|
|
}
|
|
form {
|
|
display: flex; /* 使用弹性布局 */
|
|
flex-direction: column; /* 垂直排列 */
|
|
gap: 15px; /* 表单元素间距 */
|
|
align-items: center; /* 垂直居中对齐 */
|
|
}
|
|
label {
|
|
font-weight: bold; /* 加粗标签文本 */
|
|
color: #34495e; /* 标签颜色 */
|
|
margin-bottom: 5px; /* 标签与下拉框之间的间距 */
|
|
}
|
|
select {
|
|
padding: 8px; /* 内边距 */
|
|
border: 1px solid #bdc3c7; /* 边框样式 */
|
|
border-radius: 4px; /* 圆角 */
|
|
outline: none; /* 取消默认焦点样式 */
|
|
appearance: none; /* 取消默认箭头样式 */
|
|
background-color: white; /* 背景颜色 */
|
|
background-image: url('https://cdn.jsdelivr.net/gh/a854451261/cdn/icon/select-arrow.svg'); /* 自定义箭头样式 */
|
|
background-repeat: no-repeat; /* 背景图片不重复 */
|
|
background-position: right 8px center; /* 背景图片位置 */
|
|
background-size: 12px 8px; /* 背景图片大小 */
|
|
text-align: center; /* 文本居中对齐 */
|
|
cursor: pointer; /* 鼠标悬停时显示手指图标 */
|
|
width: calc(100% - 16px); /* 宽度自适应 */
|
|
}
|
|
button {
|
|
background: linear-gradient(#3498db, #2980b9); /* 按钮渐变背景 */
|
|
color: white; /* 文本颜色 */
|
|
padding: 10px 20px; /* 内边距 */
|
|
border: none; /* 移除边框 */
|
|
border-radius: 5px; /* 圆角 */
|
|
cursor: pointer; /* 鼠标悬停时显示手指图标 */
|
|
transition: background 0.3s; /* 背景过渡效果 */
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
|
|
}
|
|
button:hover {
|
|
background: linear-gradient(#2980b9, #3498db); /* 鼠标悬停时的渐变背景 */
|
|
}
|
|
/* 提示语 */
|
|
.hint {
|
|
color: #7f8c8d; /* 提示文本颜色 */
|
|
font-size: 0.9em; /* 字体大小 */
|
|
margin-top: 10px; /* 提示与表单之间的间距 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>学生评教系统</h1>
|
|
<form id="evaluationForm" action="evaluationPage.jsp" method="get">
|
|
<div class="form-group">
|
|
<label for="college">选择学院:</label>
|
|
<select id="college" name="college" onchange="loadTeachers(this.value)">
|
|
<option value="">--请选择学院--</option>
|
|
<option value="信息工程学院">信息工程学院</option>
|
|
<option value="智能工学院">智能工学院</option>
|
|
<option value="物理学院">物理学院</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="teacher">选择老师:</label>
|
|
<select id="teacher" name="teacher" onchange="loadCourses(this.value)">
|
|
<option value="">--请选择老师--</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="course">选择课程:</label>
|
|
<select id="course" name="course">
|
|
<option value="">--请选择课程--</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit">进入评教页面</button>
|
|
</form>
|
|
<div class="hint">请选择学院、老师以及课程，然后进入评教页面。</div>
|
|
</div>
|
|
</body>
|
|
</html> |