HTML期末作业-精仿故宫模板(HTML+CSS+JavaScript)

期末作业完成!我仿了故宫官网,老师给了90分。现在分享给大家!

首页包含功能:

轮播图:在首页顶部设置一个可自动轮播的图片展示区域,展示多张宣传图片或产品图片,提升页面的视觉效果和吸引力。

置顶导航:在页面的顶部设置一个固定位置的导航栏,在用户滚动页面时保持导航栏始终可见,方便用户快速浏览和访问网站其他页面。

视频播放:在首页适当位置插入一个视频播放器,用于展示相关的宣传视频或产品介绍视频,可以吸引用户的注意力并增加互动性。

二级菜单:在导航栏中添加下拉菜单或弹出菜单,实现二级菜单的功能。当用户悬停或点击主菜单时,显示与之相关的子菜单,使用户能够更方便地找到所需的信息或页面。

鼠标滑过文字变色:为首页的一些关键文字或链接添加鼠标滑过效果,可以改变文字颜色或背景色,以提升用户体验和页面的交互性。

图片变大:在首页适当位置设置一些图片展示区域,当用户将鼠标悬停在图片上时,图片可以呈现放大效果,以吸引用户的注意力和提供更好的视觉体验。

滚动动画:通过使用CSS或JavaScript实现滚动动画效果,例如页面滚动时元素的渐变、移动或缩放效果,为页面增添动态感和流畅度

等多种功能

作品展示

作业-故宫博物馆(特效很多)

文档目录

 

获取源码

1,复制该网站 https://download.csdn.net/download/qq_42431718/87966395

2,点击上方下载 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/13632.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ajax简介和实例

目录 什么是 AJAX ? AJAX实例 ajax-get无参 ajax-get有参 对象和查询字符串的互转 ajax-post ajax-post 表单 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 什么是 AJAX ? 菜鸟教程是这样介绍的&#xff1a…

使用TypeScript实现贪吃蛇小游戏(网页版)

本项目使用webpackts所编写 下边是项目的文件目录 /src下边的index.html页面是入口文件 index.ts是引入所有的ts文件 /modules文件夹是用来存放所有类的 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…

SpringCloud:微服务技术

一、认识微服务&#xff1a; 首先&#xff0c;微服务架构不等于SpringCloud&#xff0c;微服务架构是一种经过良好架构设计的分布式架构方案&#xff0c; &#xff0c;它将应用构建成一系列按业务领域划分模块的&#xff0c;小的自治服务&#xff0c;并解决服务拆分所产生的各种…

【网络】TCP协议详解

目录 TCP协议格式 感性理解TCP报头 认识报头中的字段 序号和确认序号 4位首部长度 窗口大小 标记位 确认应答机制 超时重传机制 TCP协议格式 感性理解TCP报头 linux内核是用C语言写的&#xff0c;所以报头实际上就是一种结构化的数据对象&#xff0c;用伪代码可表示为…

UNI-APP_subNVue原生子窗口使用,web-view层级问题解决

subNVues文档 app-subnvues文档 subNVues开发指南 需求&#xff1a;在pages/cloud_control/index页面使用subNVue原生子窗口 1.pages文件配置 "app-plus": {"bounce": "none","subNVues":[{"id": "control_popup&qu…

Chapter 3: Conditional | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介Chapter 3: Conditional executionBoolean expressionsLogical operatorsConditional executionAlternative executionChained conditionalsNested conditionalsCatching exceptions using try and exceptShort-circuit evaluation of lo…

idea 启动项目 java: Compilation failed: internal java compiler error

1. 首先查看 项目的 编译的 JDK 版本是否是 匹配了或匹配的 2. 堆分配的内存不足导致&#xff0c;如下图位置 堆 构建程序的 堆大小调大

【JavaWeb】了解JavaScript DOM API

目录 1、什么是DOM 1.1、DOM树 1.2、 了解事件 2、常用的DOM API 2.1、选中页面元素 2.2、获取/修改元素内容 2.2.1、innerHTML和innerText 2.2、获取/修改元素属性 2.3、获取/修改表单元素属性 3、JQuery框架的简单了解和使用 4、代码案例&#xff1a;实现聚合索引功…

Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法

目录 背景 一、相关数据 1、湖南省2021全省地区生产总值 2、湖南Geojson数据 二、Ruoyi集成设计与实现 1、自定义地图注册 2、湖南地图引用 3、图表初始化及数据绑定 4、实际效果 总结 背景 在之前博客中&#xff0c;介绍了Echarts和Ruoyi集成的一些博客基于Echarts2.X的…

味尚食品 味尚拉面半干面是一种非常经典的中式面食

尊敬的客户&#xff0c;您好&#xff01;感谢您对我们电商平台的关注&#xff0c;我们很高兴为您介绍我们平台上的一款热销产品——味尚拉面半干面。 味尚拉面半干面是一种非常经典的中式面食&#xff0c;其主要特点体现在面条的口感和味道方面&#xff0c;让人感觉仿佛在享受正…

密码学学习笔记(八):Public-Key Encryption - 公钥加密1

简介 公钥加密也被称为非对称加密。下面是一个例子&#xff1a; Bob生成一个密钥对&#xff0c;发布他的公钥&#x1d443;&#x1d43e;&#x1d435;, 保管密钥&#x1d446;&#x1d43e;&#x1d435; 私有的Alice使用&#x1d443;&#x1d43e;&#x1d435; 加密明文M…

Windows系统中将markdown文件批量转化为PDF

需要将一个文件夹下的多个md文件转化为PDF 下载安装pandoc 官网下载地址&#xff1a;Pandoc &#xff0c;下载位置如下图。 下载后按照默认文件路径安装完成 使用everything软件查找pandoc.exe文件路径&#xff0c;如下图&#xff1a; 安装完成之后就可以在cmd窗口或Window…