首页母校介绍网页设计html+css代码

母校介绍网页设计html+css代码

时间: 2023-09-14 16:09:42 浏览: 57

下面是一个简单的母校介绍网页设计的 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 样式设置，我们为网页添加了一些颜色和排版样式，使得网页看起来更加美观和整洁。当然，这只是一个简单的示例，实际上母校介绍网页可能需要更多的内容和样式。