HTML静态网页成品作业(HTML5、CSS3和JavaScript)——旅游网站网页(内包含1个页面)

敲代码的苦132025-06-14 10:37

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;
        }