帮我写一个好看的课程管理系统的前端页面
时间: 2023-08-28 22:20:15 浏览: 46
好的,以下是一个简单的课程管理系统的前端页面设计,包括登录页面、课程列表页面和课程详情页面。这里使用了Bootstrap框架和jQuery库。
登录页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程管理系统 - 登录</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-6">
<div class="card">
<div class="card-header text-center">
<h4>课程管理系统</h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary btn-block mt-3">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
课程列表页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程管理系统 - 课程列表</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">课程管理系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">课程列表</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>课程名称</th>
<th>教师</th>
<th>学分</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>高等数学</td>
<td>张三</td>
<td>5.0</td>
<td><a href="#" class="btn btn-primary btn-sm">查看详情</a></td>
</tr>
<tr>
<td>2</td>
<td>线性代数</td>
<td>李四</td>
<td>4.0</td>
<td><a href="#" class="btn btn-primary btn-sm">查看详情</a></td>
</tr>
<tr>
<td>3</td>
<td>操作系统</td>
<td>王五</td>
<td>3.0</td>
<td><a href="#" class="btn btn-primary btn-sm">查看详情</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
```
课程详情页面:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程管理系统 - 课程详情</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">课程管理系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">课程列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">返回</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>高等数学</h5>
</div>
<div class="card-body">
<p>课程名称:高等数学</p>
<p>课程编号:001</p>
<p>教师:张三</p>
<p>学分:5.0</p>
<p>课程简介:这是一门高等数学课程。</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
以上是一个简单的课程管理系统的前端页面设计,你可以根据自己的需求进行相应的修改和扩展。需要注意的是,前端页面设计需要考虑用户体验和界面美观,保证用户能够方便快捷地使用系统。