母校介绍网页设计html+css代码
时间: 2023-09-14 11:09:42 浏览: 119
ASP校友录设计(源代码+论文).rar
下面是一个简单的母校介绍网页设计的 HTML+CSS 代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>母校介绍</title>
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* 设置头部样式 */
header {
background-color: #0078d7;
color: #fff;
padding: 20px;
}
header h1 {
font-size: 36px;
margin-bottom: 10px;
}
header p {
font-size: 18px;
margin-bottom: 20px;
}
/* 设置主要内容区域样式 */
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 30px;
}
section h2 {
font-size: 24px;
margin-bottom: 10px;
}
section p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
/* 设置页脚样式 */
footer {
background-color: #eaeaea;
padding: 20px;
text-align: center;
}
footer p {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<header>
<h1>母校介绍</h1>
<p>这里是母校的简介。</p>
</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>
</section>
</main>
<footer>
<p>版权所有 © 母校名称</p>
</footer>
</body>
</html>
```
这个网页包含一个头部、主要内容区域和页脚。在主要内容区域中,分别包含了学校历史、学校荣誉、师资力量和校园环境等部分。通过 CSS 样式设置,我们为网页添加了一些颜色和排版样式,使得网页看起来更加美观和整洁。当然,这只是一个简单的示例,实际上母校介绍网页可能需要更多的内容和样式。
阅读全文