HTML做一个简单的页面（纯html代码）地球专题学习网站
以下是一个简单的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; }
header { background-color: #4CAF50; color: white; padding: 10px; text-align: center; }
nav { float: left; width: 200px; }
nav ul { list-style-type: none; padding: 0; }
nav ul li { padding: 8px; margin-bottom: 7px; background-color: #dddddd; }
nav ul li:hover { background-color: #cccccc; }
section { margin-left: 210px; padding: 10px; }
footer { background-color: #4CAF50; color: white; text-align: center; padding: 10px; margin-top: 10px; clear: both; }
</style>
</head>
<body>
<header>
<h1>欢迎来到地球专题学习网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">地球环境</a></li>
<li><a href="#">地理学习</a></li>
<li><a href="#">地球资源</a></li>
<li><a href="#">地球科学</a></li>
</ul>
</nav>
<section>
<h2>地球环境</h2>
<p>这里是关于地球环境的内容。</p>
</section>
<footer>
<p>版权所有 © 地球专题学习网站</p>
</footer>
</body>
</html>这个示例展示了如何使用HTML创建一个简单的网站结构，并通过内部样式表（<style>标签）添加基本的样式。这个网站有一个头部（header），一个导航菜单（nav），一个主要内容区域（section），以及一个页脚（footer）。导航菜单浮动在左侧，主要内容区域在右侧，使用了清除浮动技术以防止页脚位于内容下方。
评论已关闭