html5期末大作业——HTML+CSS公益关爱残疾人( 6个页面)html网页制作
由于篇幅所限，这里只提供了首页的HTML和CSS代码示例。其他页面的制作方法类似，只需更改相应的内容即可。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公益关爱残疾人</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="navigation">
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="gallery.html">图库</a></li>
<li><a href="news.html">新闻</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<!-- 主要内容 -->
</main>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
padding: 10px 0;
color: #fff;
}
.navigation ul {
list-style-type: none;
display: flex;
}
.navigation li {
margin-right: 10px;
}
.navigation li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border: 1px solid transparent;
}
.navigation li a.active,
.navigation li a:hover {
border-color: #fff;
}
main {
/* 主要内容的样式 */
}
footer {
/* 页脚的样式 */
}这个示例提供了一个简单的HTML和CSS框架，你可以在此基础上添加具体的页面内容和设计。记得为其他页面创建相应的HTML文件，并在<header>中的<nav>标签内更新正确的链接。
评论已关闭