用HTML css制作介绍家乡地理环境的网址
时间: 2023-11-28 20:50:49 浏览: 84
网页设计作业-家乡介绍(html+css+js)
5星 · 资源好评率100%
好的,以下是一个简单的HTML和CSS代码示例,用于制作介绍家乡地理环境的网页。您可以根据自己的需要进行修改和调整。
```html
<!DOCTYPE html>
<html>
<head>
<title>介绍家乡地理环境</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #ccc;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #ddd;
}
section {
margin: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</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>
<section>
<h2>地理位置</h2>
<p>这里是家乡的地理位置信息。</p>
</section>
<section>
<h2>气候特点</h2>
<p>这里是家乡的气候特点介绍。</p>
</section>
<section>
<h2>自然景观</h2>
<p>这里是家乡的自然景观介绍。</p>
</section>
<section>
<h2>人文景观</h2>
<p>这里是家乡的人文景观介绍。</p>
</section>
<footer>
<p>版权所有 © 2021 家乡名称</p>
</footer>
</body>
</html>
```
您可以根据实际情况修改标题、导航、内容部分的文字和图片等内容,使其更加符合您的需求。
阅读全文