扩展这个页面,加入更多的内容
时间: 2024-02-17 12:59:40 浏览: 9
好的,我可以通过添加更多的 HTML 和 CSS 代码来扩展这个页面,并加入更多的内容。以下是一个示例:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>电子招生网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到电子招生网站!</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">招生简章</a></li>
<li><a href="#">报名流程</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>招生简介</h2>
<p>这里是招生简介的内容</p>
</section>
<section>
<h2>报名流程</h2>
<p>这里是报名流程的内容</p>
</section>
<section>
<h2>联系我们</h2>
<p>这里是联系我们的内容</p>
</section>
<section>
<h2>课程介绍</h2>
<p>这里是课程介绍的内容</p>
<ul>
<li>课程1</li>
<li>课程2</li>
<li>课程3</li>
</ul>
</section>
<section>
<h2>师资力量</h2>
<p>这里是师资力量的内容</p>
<ul>
<li>教师1</li>
<li>教师2</li>
<li>教师3</li>
</ul>
</section>
<section>
<h2>学生作品</h2>
<p>这里是学生作品的内容</p>
<ul>
<li>作品1</li>
<li>作品2</li>
<li>作品3</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 电子招生网站</p>
</footer>
</body>
</html>
```
CSS 代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
line-height: 1.5;
}
ul {
margin-left: 20px;
}
li {
margin-bottom: 10px;
}
```
在上面的示例中,我们添加了三个新的 `section` 元素,用于展示课程介绍、师资力量和学生作品。每个 `section` 元素都包含一个标题、一些内容和一个无序列表。我们还更新了 `ul` 和 `li` 元素的样式,以便它们更加美观。
当然,您可以根据您的需要添加更多的内容和样式,以创建一个适合您电子招生网站的界面。