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

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;
        }
相关推荐
Zuckjet_1 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801461 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店3 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.6 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰6 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息6 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC6 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi