帮我用css和html写一个基础的学生课程界面
时间: 2024-10-01 15:06:43 浏览: 16
当然可以,下面是一个基础的学生课程界面的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生课程界面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 10px;
}
.courses-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
overflow-y: auto;
}
.course-item {
background-color: #ffffff;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.course-item:hover {
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.course-item p {
margin-bottom: 5px;
}
footer {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>学生课程管理</h1>
</header>
<main>
<section class="courses-list">
<!-- 这里你可以添加课程列表项的HTML结构,每个条目由课程名称、教师、时间等组成 -->
<div class="course-item">
<p><strong>课程名称:</strong> 计算机科学入门</p>
<p><strong>教师:</strong> 张老师</p>
<p><strong>时间:</strong> 周二 14:00-16:00</p>
</div>
<!-- 更多课程... -->
</section>
</main>
<footer>
© 2023 学生课程界面
</footer>
</div>
</body>
</html>
```
这个例子创建了一个简单的课程界面,包括一个标题、课程列表(显示课程名称、教师和时间),以及页脚。你可以在这个基础上根据需要修改样式或添加更多内容。