设计一个简单的旅游网页代码
时间: 2024-09-19 11:07:43 浏览: 47
设计一个简单的旅游网页通常包括HTML、CSS和JavaScript来构建页面结构、样式和交互功能。下面是一个基本的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单旅游网站</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
<header>
<h1>欢迎来到旅游天堂</h1>
<nav>
<ul>
<li><a href="#destinations">目的地</a></li>
<li><a href="#hotels">酒店</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
</nav>
</header>
<main id="destinations">
<h2>热门旅游景点</h2>
<ul>
<li>
<a href="#">故宫博物院</a>
<p>北京,中国</p>
</li>
<!-- 添加更多景点信息... -->
</ul>
</main>
<section id="hotels">
<h2>精选酒店</h2>
<div class="hotel-item">
<img src="hotel1.jpg" alt="酒店1">
<h3>豪华酒店A</h3>
<p>地址:XXX街道</p>
</div>
<!-- 添加更多酒店项... -->
</section>
<footer>
<p>© 2023 旅游网,版权所有</p>
</footer>
<script src="scripts.js"></script> <!-- 引入脚本文件 -->
</body>
</html>
```
然后在`styles.css`中添加一些基础样式,而在`scripts.js`中可以添加交互逻辑,如轮播图、表单验证等。
阅读全文