HTML静态网页成品作业(HTML5、CSS3和JavaScript)——旅游网站网页(内包含1个页面)
一、作品介绍：
一个包含首页、旅游景点介绍、家乡介绍等页面的旅游网站。该网站采用HTML5、CSS3和JavaScript进行布局和样式设计，确保兼容主流浏览器。网站布局使用了DIV+CSS，实现了简洁大气的设计效果，并包含了导航条、图片插入、表单提交等功能。此外，网站还具备鼠标悬停变色、动态图片切换等交互效果。每个页面都保持了统一的设计风格，以增强整体宣传效果。
二、网站样式：
三、网站代码：
HTML部分代码(需要全部代码请私聊)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>探索之旅 - 高端旅游体验</title>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<style>
:root {
--primary-dark: #1a237e;
--primary-light: #303f9f;
--accent: #ff6d00;
--accent-light: #ff9100;
--bg-light: #f5f5f5;
--text-dark: #212121;
--text-light: #757575;
--white: #ffffff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
background-color: var(--primary-dark);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}