用HTML模块化设计一个网站
时间: 2023-06-13 14:03:08 浏览: 92
好的,我可以为您提供一个简单的 HTML 模块化设计的示例。以下是一个基本的网站结构,其中包含头部,导航栏,主体和页脚模块。
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae aliquam lorem. Sed vel enim in nulla ullamcorper eleifend. Nullam aliquam purus et sapien commodo, ut rhoncus justo tincidunt. Nulla eu mi in diam elementum fringilla. Curabitur mollis est vel leo tempus, ac laoreet metus elementum.</p>
</section>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae aliquam lorem. Sed vel enim in nulla ullamcorper eleifend. Nullam aliquam purus et sapien commodo, ut rhoncus justo tincidunt. Nulla eu mi in diam elementum fringilla. Curabitur mollis est vel leo tempus, ac laoreet metus elementum.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae aliquam lorem. Sed vel enim in nulla ullamcorper eleifend. Nullam aliquam purus et sapien commodo, ut rhoncus justo tincidunt. Nulla eu mi in diam elementum fringilla. Curabitur mollis est vel leo tempus, ac laoreet metus elementum.</p>
</section>
</main>
<footer>
<p>© 2021 My Website. All rights reserved.</p>
</footer>
</body>
</html>
```
style.css:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
/* 导航栏样式 */
nav {
background-color: #666;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/* 主体样式 */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
/* 页脚样式 */
footer {
background-color: #ccc;
color: #666;
padding: 20px;
text-align: center;
}
```
这个示例中,头部,导航栏,主体和页脚都是独立的模块,可以在其他页面上重复使用。这种模块化方法可以使代码更易于维护和扩展。