我需要一个用HTML5加js制作一个杭州的风之谷木屋房车营地风景区的网页代码
时间: 2024-03-14 16:49:32 浏览: 190
好的,以下是简单的一个HTML5和JavaScript的代码示例,可以作为您自己制作的起点:
```
<!DOCTYPE html>
<html>
<head>
<title>风之谷木屋房车营地风景区</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 10px;
}
.section {
margin: 20px 0;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
h1 {
font-size: 36px;
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.5;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>风之谷木屋房车营地风景区</h1>
</header>
<div class="container">
<section class="section">
<h1>欢迎来到风之谷木屋房车营地风景区</h1>
<p>我们是一家提供住宿、餐饮、娱乐等服务的综合性风景区,位于杭州市郊,环境优美,交通方便,是您休闲度假的好选择。</p>
<img src="https://example.com/images/campsite.jpg" alt="风之谷木屋房车营地">
</section>
<section class="section">
<h1>房车营地</h1>
<p>我们提供宽敞的露营地和舒适的房车营地,您可以享受大自然的美景,同时也拥有现代的设施和服务。</p>
<img src="https://example.com/images/rv-campsite.jpg" alt="房车营地">
</section>
<section class="section">
<h1>木屋住宿</h1>
<p>我们的木屋住宿设施舒适,环境宜人,您可以在这里享受到宁静和放松的时光。</p>
<img src="https://example.com/images/cabin.jpg" alt="木屋住宿">
</section>
<section class="section">
<h1>美食餐饮</h1>
<p>我们提供多种美食餐饮选择,包括当地特色菜品和国际美食,让您的味蕾得到满足。</p>
<img src="https://example.com/images/restaurant.jpg" alt="美食餐饮">
</section>
<section class="section">
<h1>娱乐活动</h1>
<p>我们提供多种娱乐活动,包括露营、钓鱼、徒步旅行等,让您在享受美景的同时也可以锻炼身体,释放压力。</p>
<img src="https://example.com/images/activities.jpg" alt="娱乐活动">
</section>
<section class="section">
<h1>联系我们</h1>
<p>如果您有任何疑问或者需要预订,请联系我们:</p>
<p>电话:010-12345678</p>
<p>邮箱:info@example.com</p>
</section>
</div>
</body>
</html>
```
请注意,这只是一个简单的示例,您需要根据实际情况进行修改和扩展。
阅读全文