html5写旅游网站

网站结构设计

页面布局规划

核心功能实现

图片轮播组件

<div class="carousel">
  <button class="prev">&lt;</button>
  <ul class="slides">
    <li><img src="beijing.jpg" alt="北京"></li>
    <li><img src="sanya.jpg" alt="三亚"></li>
    <li><img src="xizhao.jpg" alt="西樵山"></li>
  </ul>
  <button class="next">&gt;</button>
</div>

.carousel { position: relative; overflow: hidden; }
.slides { display: flex; transition: transform 0.5s; }
.slides li { min-width: 100%; list-style: none; }
.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); }

const slides = document.querySelector('.slides');
let current = 0;
document.querySelector('.next').addEventListener('click', () => {
  current = (current + 1) % 3;
  slides.style.transform = `translateX(-${current  100}%)`;
});
// 类似实现prev按钮逻辑

目的地详情页

<table class="destination-info">
  <tr><th>名称</th><td>丽江古城</td></tr>
  <tr><th>评分</th><td>★★★★☆ (4.8/5)</td></tr>
  <tr><th>最佳季节</th><td>3-5月 / 9-11月</td></tr>
  <tr><th>门票</th><td>50元/人</td></tr>
  <tr><th>开放时间</th><td>08:00-18:00</td></tr>
</table>

.destination-info {
  width: 100%; max-width: 600px; margin: 0 auto;
  border-collapse: collapse; text-align: left;
}
.destination-info th, .destination-info td {
  padding: 12px 15px; border-bottom: 1px solid #eee;
}
.destination-info th { width: 80px; font-weight: normal; color: #666; }

行程预订表单

<form id="booking-form">
  <div class="form-group">
    <label>出发城市</label>
    <input type="text" name="from" placeholder="请输入出发地" required>
  </div>
  <div class="form-group">
    <label>目的地</label>
    <select name="to" required>
      <option value="">--选择目的地--</option>
      <!-动态生成选项 -->
    </select>
  </div>
  <div class="form-group">
    <label>出行日期</label>
    <input type="date" name="date" required>
  </div>
  <button type="submit" class="btn-submit">立即预订</button>
</form>

document.getElementById('booking-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  // 数据验证逻辑
  // 发送AJAX请求或本地存储
  alert('预订成功！');
});

交互体验优化

1. 懒加载技术：对攻略文章列表使用IntersectionObserver实现图片懒加载
2. 动画过渡：导航菜单使用CSS3过渡效果，悬停时添加活性态
3. 响应式适配：使用媒体查询调整布局，在移动设备显示折叠菜单
4. 无障碍设计：为图片添加alt属性，使用aria-label标注非文本元素

相关问题与解答

Q1：如何实现移动端适配的导航菜单？

A：使用CSS媒体查询配合JavaScript事件监听，当屏幕宽度小于768px时，将<nav>元素转换为汉堡菜单样式，点击时展开/收起下拉列表,示例代码：

@media (max-width: 768px) {
nav { padding: 10px; }
.nav-list { display: none; position: absolute; background: #fff; }
.nav-toggle:checked ~ .nav-list { display: block; }
}

<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle">☰</label>
<ul class="nav-list">...</ul>

Q2：怎样优化图片加载性能？

A：采用以下策略：

<picture>
<source srcset="banner.webp" type="image/webp">
<img src="banner.jpg" alt="风景图" loading="lazy">