以下是一个简单的HTML代码示例,展示了一个典型的网页布局,包括页眉、菜单、内容和页脚。
<!DOCTYPE html>
<html>
<head>
<title>网页布局示例</title>
<style>
/* 样式表 */
body {
margin: 0;
padding: 0;
}
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<nav>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</nav>
<main>
<h2>内容标题</h2>
<p>这是网页的主要内容。</p>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
这个示例使用了HTML和CSS来实现网页布局。其中,<header>
标签用于定义页眉,<nav>
标签用于定义菜单栏,<main>
标签用于定义主要内容区域,<footer>
标签用于定义页脚。
可以自行运行这段代码,观察网页布局的效果。