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;
        }
相关推荐
还要啥名字1 天前
elpis NPM包的抽离
前端
郑陈皮1 天前
Vue.js 全栈知识点费曼学习法指南
vue.js
成小白1 天前
前端实现连词搜索下拉效果
前端·javascript
卸任1 天前
从0到1搭建react-native自动更新(OTA和APK下载)
前端·react native·react.js
OpenTiny社区1 天前
OpenTiny NEXT 训练营实操体验 | 四步将你的 Web 应用升级为智能应用
前端·开源·ai编程
持续迷茫1 天前
lint-staged 中 --verbose 选项的深度解析
前端·git
拜无忧1 天前
带有“水波纹”或“扭曲”效果的动态边框,进度条
前端
12码力1 天前
open3d 处理rgb-d深度图
前端
小猪猪屁1 天前
WebAssembly 从零到实战:前端性能革命完全指南
前端·vue.js·webassembly
EMT1 天前
记一个Vue.extend的用法
前端·vue.js