用HTML写一个选课系统页面
时间: 2024-06-08 07:08:37 浏览: 168
好的,以下是一个简单的选课系统页面的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>选课系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>选课系统</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程列表</a></li>
<li><a href="#">我的课程</a></li>
<li><a href="#">个人信息</a></li>
</ul>
</nav>
<main>
<section>
<h2>课程列表</h2>
<table>
<thead>
<tr>
<th>课程编号</th>
<th>课程名称</th>
<th>授课教师</th>
<th>学分</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>计算机科学导论</td>
<td>张三</td>
<td>3</td>
<td><button>选课</button></td>
</tr>
<tr>
<td>002</td>
<td>数据结构与算法</td>
<td>李四</td>
<td>4</td>
<td><button>选课</button></td>
</tr>
<tr>
<td>003</td>
<td>数据库系统原理</td>
<td>王五</td>
<td>3</td>
<td><button>选课</button></td>
</tr>
</tbody>
</table>
</section>
<aside>
<h3>我的课程</h3>
<ul>
<li>计算机科学导论</li>
<li>数据库系统原理</li>
</ul>
</aside>
</main>
<footer>
<p>© 2021 选课系统</p>
</footer>
</body>
</html>
```
这个页面包括一个页头、导航菜单、主要内容区域和页脚。在主要内容区域中,我们展示了一个课程列表和一个我的课程的侧边栏。每个课程都包括课程编号、课程名称、授课教师、学分和一个选课按钮。在侧边栏中,我们展示了当前用户已选的课程列表。
阅读全文