以“我的母校”设计一个小型网站,运用html+css格式
时间: 2024-03-07 15:50:37 浏览: 15
好的,以下是一个简单的“我的母校”网站设计,运用 HTML 和 CSS 格式:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的母校</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #003366;
color: white;
padding: 10px;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #003366;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #003366;
color: white;
}
section {
padding: 20px;
margin-top: 20px;
}
footer {
background-color: #003366;
color: white;
padding: 10px;
text-align: center;
}
/* 自定义样式 */
.school-image {
display: block;
margin: 0 auto;
width: 80%;
max-width: 500px;
}
.school-history {
font-size: 18px;
line-height: 1.5;
text-align: justify;
margin-bottom: 20px;
}
.school-location {
margin-top: 20px;
}
.school-location iframe {
display: block;
margin: 0 auto;
width: 80%;
max-width: 500px;
height: 300px;
border: none;
}
</style>
</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>
<section>
<h2>学校简介</h2>
<img src="https://picsum.photos/800/400?random=1" alt="学校图片" class="school-image">
<p class="school-history">我母校创建于20世纪初,位于一个美丽的小城市。学校一直秉承“厚德、博学、求是、创新”的校训,为培养优秀的人才而不懈努力。</p>
</section>
<section>
<h2>历史沿革</h2>
<p class="school-history">学校创办至今已有百年历史,经历了多次变革和发展。从最初的小学到现在的完整的教育体系,学校的发展历程展现着时代的变迁和社会的发展。</p>
</section>
<section>
<h2>校园风光</h2>
<img src="https://picsum.photos/800/400?random=2" alt="校园图片" class="school-image">
<p class="school-history">学校环境优美,建筑风格独特。校园内有各种各样的设施和活动,为学生提供了丰富多彩的学习和生活体验。</p>
<div class="school-location">
<h3>学校位置</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7247.224746137341!2d113.36854817473271!3d23.129063658782632!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34017a7cde3f8f73%3A0x92d3f2f8de6edfaa!2z5aSn5a2m5YyW5Y2A5aSn5a2m5ZCI5Y2X5Lmd5YWr5a2m5o6S!5e0!3m2!1szh-CN!2scn!4v1622016322807!5m2!1szh-CN!2scn" allowfullscreen></iframe>
</div>
</section>
<footer>
<p>版权所有 © 我的母校</p>
</footer>
</body>
</html>
```
这个网站包括了学校简介、历史沿革、校园风光和联系我们四个页面,你可以根据自己的需求进行修改和扩展。