课外辅导班的网站,给出具体的代码
时间: 2024-10-08 13:01:28 浏览: 8
课外辅导班的网站通常是在线教育平台的一部分,可以包括用户注册、课程浏览、教师信息展示、预约报名等功能。为了简化说明,我们可以构建一个基本的HTML、CSS和JavaScript框架来表示这样的网站的基本结构。请注意,这只是一个简单的示例,并未包含完整的数据库交互或后端服务。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>课外辅导班网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<ul>
<li><a href="#courses">课程列表</a></li>
<li><a href="#teachers">教师团队</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 内容区域 -->
<main>
<!-- 课程列表 -->
<section id="courses">
<h2>课程列表</h2>
<ul class="course-list">
<!-- 每项课程都是一个动态生成的li -->
<li class="course-item">
<h3>数学强化</h3>
<p>适合年级: 小学五年级</p>
<button class="enroll-btn">立即报名</button>
</li>
</ul>
</section>
<!-- 教师团队 -->
<section id="teachers">
<h2>教师团队</h2>
<div class="teacher-card">
<!-- 每位教师是一个卡片 -->
<div class="teacher-card-content">
<img src="teacher.jpg" alt="张老师">
<h4>张老师</h4>
<p>专业领域: 数学</p>
</div>
</div>
</section>
</main>
<script src="scripts.js"></script>
</body>
</html>
```
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f0f0f0;
}
.course-list {
list-style-type: none;
}
.teacher-card {
display: flex;
margin-bottom: 20px;
}
```
```javascript
// scripts.js (简化版)
document.addEventListener('DOMContentLoaded', () => {
// 动态添加课程数据
const coursesData = [
{ name: '数学强化', grade: '小学五年级' },
// 更多课程...
];
const courseList = document.querySelector('.course-list');
coursesData.forEach(course => {
const item = document.createElement('li');
item.classList.add('course-item');
item.innerHTML = `
<h3>${course.name}</h3>
<p>适合年级: ${course.grade}</p>
<button class="enroll-btn">立即报名</button>
`;
courseList.appendChild(item);
});
});
```