制作一个html+css组成的前端页面,内容为家乡旅游介绍
时间: 2024-04-06 09:32:47 浏览: 66
好的,以下是一个简单的家乡旅游介绍的 HTML 和 CSS 静态页面示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家乡旅游介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的家乡</h1>
<nav>
<ul>
<li><a href="#about">关于家乡</a></li>
<li><a href="#scenery">风景介绍</a></li>
<li><a href="#food">美食推荐</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>关于家乡</h2>
<p>我的家乡位于中国南方,是一个美丽的小城市。这里环境优美,四季如春,是一个旅游胜地。欢迎你来我的家乡旅游。</p>
</section>
<section id="scenery">
<h2>风景介绍</h2>
<ul>
<li>
<h3>山水画廊</h3>
<img src="scenery1.jpg" alt="山水画廊">
<p>山水画廊是我家乡的一处著名景点。这里有秀美的山水、清新的空气和宜人的氛围,是一个放松心情、享受自然的好地方。</p>
</li>
<li>
<h3>古镇街道</h3>
<img src="scenery2.jpg" alt="古镇街道">
<p>古镇街道是我家乡的历史文化遗产,这里有古色古香的建筑、繁华的商业街和传统的手工艺品,是一个了解中国传统文化的好地方。</p>
</li>
<li>
<h3>湖畔公园</h3>
<img src="scenery3.jpg" alt="湖畔公园">
<p>湖畔公园是我家乡的一个休闲娱乐场所,这里有湖泊、花园、游乐设施和咖啡馆,是一个适合家庭和小伙伴们一起度假的好地方。</p>
</li>
</ul>
</section>
<section id="food">
<h2>美食推荐</h2>
<ol>
<li>家乡小吃1</li>
<li>家乡小吃2</li>
<li>家乡小吃3</li>
<li>家乡小吃4</li>
</ol>
<p>这些小吃都是我家乡的特色美食,味道非常好,你一定要来尝一尝。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>如果你有任何问题或者需要更多的旅游信息,可以通过以下方式联系我们:</p>
<ul>
<li>电话:123456789</li>
<li>电子邮件:tourism@myhometown.com</li>
<li>地址:XXX路XX号XX楼XX室</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 我的家乡旅游网</p>
</footer>
</body>
</html>
```
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 36px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 20px;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
section h2 {
font-size: 28px;
margin-top: 0;
}
section ul, section ol {
margin-left: 20px;
}
section li {
margin-bottom: 20px;
line-height: 1.5;
}
section li h3 {
font-size: 24px;
margin-top: 0;
}
section li img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
你可以将上面的 HTML 代码保存为一个 `.html` 文件,将上面的 CSS 代码保存为一个 `.css` 文件,并在 HTML 文件中引入 CSS 文件,就可以在浏览器中预览这个静态页面了。
阅读全文