能优化一下,加上帆船酒店的图片
时间: 2024-03-26 13:39:09 浏览: 96
大海上的帆船PPT背景图片
好的,我可以为您优化一下代码,添加帆船酒店的图片。以下是更新后的代码:
index.html(主页):
```html
<!DOCTYPE html>
<html>
<head>
<title>帆船酒店</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>帆船酒店</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">客房</a></li>
<li><a href="#">预订</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<img src="hotel.jpg" alt="帆船酒店">
<h2>欢迎来到帆船酒店</h2>
<p>我们提供独特的帆船住宿体验,让您在大海上享受宁静和美丽。</p>
<a href="#">了解更多</a>
</section>
<section>
<h2>我们的客房</h2>
<p>我们提供多种类型的客房,包括标准客房、豪华客房和套房等。</p>
<a href="#">查看客房</a>
</section>
<section>
<h2>预订信息</h2>
<p>请填写以下信息预订您的帆船住宿。</p>
<form action="booking.html" method="post">
<label for="checkin">入住日期:</label>
<input type="date" id="checkin" name="checkin" required>
<label for="checkout">离开日期:</label>
<input type="date" id="checkout" name="checkout" required>
<label for="guests">客人人数:</label>
<input type="number" id="guests" name="guests" required>
<button type="submit">预订</button>
</form>
</section>
</main>
<footer>
<p>© 2021 帆船酒店</p>
</footer>
</body>
</html>
```
booking.html(预订页面):
```html
<!DOCTYPE html>
<html>
<head>
<title>帆船酒店 - 预订</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>帆船酒店</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">客房</a></li>
<li><a href="#">预订</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>预订信息</h2>
<p>请确认以下预订信息。</p>
<ul>
<li>入住日期:<?php echo $_POST["checkin"]; ?></li>
<li>离开日期:<?php echo $_POST["checkout"]; ?></li>
<li>客人人数:<?php echo $_POST["guests"]; ?></li>
</ul>
<p>感谢您的预订,我们会尽快与您联系。</p>
</section>
</main>
<footer>
<p>© 2021 帆船酒店</p>
</footer>
</body>
</html>
```
请注意,这些代码只是一个简单的示例,可能需要根据您的实际需求进行修改和完善。同时,您可能需要编写一个 CSS 文件来定义网页的样式,以及一个 PHP 文件来处理预订信息。图片路径也需要根据您的实际情况进行修改。
阅读全文