制作一个简单HTML静态网页（HTML+CSS）
在上一个示例的基础上，我们可以继续完善这个HTML静态网页，添加一个导航栏和一个简单的页脚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网站</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation li a:hover {
background-color: #ddd;
color: black;
}
.content {
margin: 15px;
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>我的网站</h1>
</div>
<ul class="navigation">
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<div class="content">
<h2>内容</h2>
<p>这里是内容...</p>
</div>
<div class="footer">
<p>版权所有 © 2023</p>
</div>
</body>
</html>这个示例添加了一个导航栏，并通过CSS样式使其浮动在页面顶部。同时，页脚被设置为绝对定位，始终显示在页面底部。这样的页面布局更加合理，便于用户理解页面结构。
评论已关闭