旅游网站的网页设计html代码
时间: 2023-11-15 12:44:58 浏览: 95
网页设计期末作业秦皇岛旅游html+css
5星 · 资源好评率100%
以下是一个简单的旅游网站的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>旅游网站</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
<h1>欢迎来到我们的旅游网站</h1>
<p>探索世界,发现美好。</p>
</header>
<main>
<section>
<h2>热门目的地</h2>
<ul>
<li>
<img src="destinations/paris.jpg" alt="巴黎">
<h3>巴黎</h3>
<p>欧洲最浪漫的城市,塞纳河畔的爱情故事让人陶醉。</p>
<a href="#">了解更多</a>
</li>
<li>
<img src="destinations/newyork.jpg" alt="纽约">
<h3>纽约</h3>
<p>美国最大的城市,时尚、文化、商务中心。</p>
<a href="#">了解更多</a>
</li>
<li>
<img src="destinations/tokyo.jpg" alt="东京">
<h3>东京</h3>
<p>日本的首都,现代化和传统文化完美结合。</p>
<a href="#">了解更多</a>
</li>
</ul>
</section>
<section>
<h2>旅游指南</h2>
<p>我们提供最新的旅游资讯和指南,帮助您计划完美的旅程。</p>
<ul>
<li>
<h3>如何制定旅游预算?</h3>
<p>了解如何制定旅游预算,避免旅游花费超支。</p>
<a href="#">阅读更多</a>
</li>
<li>
<h3>如何选择旅游目的地?</h3>
<p>根据自己的兴趣和预算选择最适合的旅游目的地。</p>
<a href="#">阅读更多</a>
</li>
<li>
<h3>如何预订旅游行程?</h3>
<p>了解如何预订旅游行程,节省时间和金钱。</p>
<a href="#">阅读更多</a>
</li>
</ul>
</section>
<section>
<h2>特别优惠</h2>
<p>我们提供最新的特别优惠,让您享受更实惠的旅游体验。</p>
<ul>
<li>
<h3>欧洲游特别优惠</h3>
<p>预订欧洲游,享受5%的折扣。</p>
<a href="#">了解更多</a>
</li>
<li>
<h3>亚洲游特别优惠</h3>
<p>预订亚洲游,享受10%的折扣。</p>
<a href="#">了解更多</a>
</li>
</ul>
</section>
<section>
<h2>联系我们</h2>
<p>如果您有任何问题或建议,请随时联系我们。</p>
<form action="#" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>© 2021 旅游网站</p>
</footer>
</body>
</html>
```
以上代码包括一个网站的基本结构,包括导航栏、页眉、主要内容和页脚。你可以通过CSS样式表 `style.css` 来美化页面的样式。
阅读全文