HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码,共有6个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="main"><div class="h2">迪士尼公主</div><div class="banner"><img src="./img/bb.png" alt=""></div><div class="imgbox"><div class="imgitem" onmousemove="m(this)" onmouseleave="l(this)"><a href="1.html"><img src="./img/1.jpg" alt=""><span>白雪公主</span></a></div><div class="imgitem"  onmousemove="m(this)" onmouseleave="l(this)"><a href="2.html"><img src="./img/2.jpg" alt=""><span>长发公主</span></a></div><div class="imgitem"  onmousemove="m(this)" onmouseleave="l(this)"><a href="3.html"><img src="./img/3.jpg" alt=""><span>贝儿</span></a></div><div class="imgitem"  onmousemove="m(this)" onmouseleave="l(this)"><a href="4.html"><img src="./img/4.jpg" alt=""><span>辛德瑞拉</span></a></div><div class="imgitem"  onmousemove="m(this)" onmouseleave="l(this)"><a href="5.html"><img src="./img/5.jpg" alt=""><span>花木兰</span></a></div></div></div><script src="./js/index.js"></script>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

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

相关文章

基于单片机的酒精浓度测试仪

摘 要 现如今&#xff0c;人们对生活的态度和生活方式变得不同,&#xff0c;不仅私家车成为了人们最普遍的交通工具&#xff0c;大多数人都有自己的私家车,而且人们对酒精的消耗量也越来越大&#xff0c;这些就导致酒后驾车行为越来越普遍&#xff0c;酒后驾车意外越来越频繁&…

【深度学习笔记】10_10 束搜索beam-search

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 10.10 束搜索 上一节介绍了如何训练输入和输出均为不定长序列的编码器—解码器。本节我们介绍如何使用编码器—解码器来预测不定长的序…

【测试知识】业务面试问答突击版3---bug、测试用例设计

文章目录 一个完整的缺陷报告包含一个完整的测试用例包含一个完整的测试计划包含缺陷严重等级简述等价类划分法并举例简述边界值分析法逻辑覆盖针对具体场景的测试用例设计软件中存在多个分支时如何设计测试用例静态代码检查什么白盒测试是&#xff1f;常用方法是&#xff1f; …

3dmax2020模型显示黑白不稳定---模大狮模型网

如果在3ds Max 2020中显示的模型出现黑白不稳定的情况&#xff0c;可能有几个常见原因和解决方法&#xff1a; 显卡驱动问题&#xff1a; 首先检查你的显卡驱动程序是否是最新版本。过时或不兼容的显卡驱动可能导致显示问题。建议更新到最新的显卡驱动程序&#xff0c;并确保其…

JAVA泛型-泛型方法的定义和使用

请直接看原文: JAVA泛型-泛型方法的定义和使用-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 1.泛型方法的定义和语法 1.1 定义 泛型方法 是在调用方法的时候指明泛型的…

YOLOv9(3):YOLOv9损失(Loss)计算

1. 写在前面 YOLOv9的Loss计算与YOLOv8如出一辙&#xff0c;仅存在略微的差异。多说一句&#xff0c;数据的预处理和导入方式都是一样的。因此如果你已经对YOLOv8了解的比较透彻&#xff0c;那么对于YOLOv9你也只是需要多关注网络结构就可以。 YOLOv9本身也是Anchor-Free的&a…

编译esp32s3的ncnn,并运行mnist 手写数字识别

东哥科技&#xff0c;专注科技研发&#xff0c;wx交流&#xff1a;dg_i688 我的项目代码 https://github.com/cdmstrong/ncnn_on_esp32s3 下载ncnn git clone https://github.com/Tencent/ncnn.git安装idf 环境 这里直接按官网的可执行文件来就好了&#xff0c;直接安装完…

[mysql必备面试题]-mysql索引(B+ Tree )

一 B Tree 原理 1. 数据结构 B Tree 指的是 Balance Tree&#xff0c;也就是平衡树。平衡树是一颗查找树&#xff0c;并且所有叶子节点位于同一层。 B Tree 是基于 B Tree 和叶子节点顺序访问指针进行实现&#xff0c;它具有 B Tree 的平衡性&#xff0c;并且通过顺序访问指针…

【python中处理日期和时间二】扩展内容datetime模块-pytz模块-dateutil模块

扩展内容&#xff1a;日期和时间 datetime模块&#xff1b;pytz模块&#xff1b;dateutil模块 一、 datetime模块 查看datetime模块函数&#xff1a; >>> import datetime >>> dir(datetime) [MAXYEAR, MINYEAR, UTC, __all__, __builtins__, __cached__…

2024最新国内外低代码平台大全

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

PTA L1-079 天梯赛的善良(C++)

天梯赛是个善良的比赛。善良的命题组希望将题目难度控制在一个范围内&#xff0c;使得每个参赛的学生都有能做出来的题目&#xff0c;并且最厉害的学生也要非常努力才有可能得到高分。 于是命题组首先将编程能力划分成了 106 个等级&#xff08;太疯狂了&#xff0c;这是假的&…

在C#中使用NModbus4通信库执行读操作

Modbus是一种工业领域内广泛使用的通信协议&#xff0c;它是一种基于主从结构的串行通信协议。NModbus4是一个开源的Modbus通信库&#xff0c;用于.NET平台&#xff0c;可以方便地在C#中执行Modbus操作。本文将介绍如何使用NModbus4通信库在C#中执行读操作&#xff0c;包括安装…

Linux下非阻塞IO实验一

一. 简介 前面文章学习了 Linux内核提供的针对应用程序阻塞与非阻塞访问设备的处理方法。文章地址如下&#xff1a; Linux内核中处理非阻塞访问的方法&#xff1a;轮询-CSDN博客 Linux内核中轮询对应于应用层的函数之一&#xff1a;poll函数-CSDN博客 Linux内核中轮询对应…

Python常用新特性记录

Python常用新特性记录 Python3.8PEP 572 &#xff1a;赋值表达式f-字符串支持 用于自动记录表达式和调试文档 Python3.9PEP 584&#xff1a;字典合并与更新运算符PEP 616&#xff1a;新增用于移除前缀和后缀的字符串方法PEP 585&#xff1a;标准多项集中的类型标注泛型 Python…

python面向对象的三大特性:封装,继承,多态

1、面向对象有哪些特性 三种&#xff1a;封装性、继承性、多态性 2、Python中的封装 在Python代码中&#xff0c;封装有两层含义&#xff1a; ① 把现实世界中的主体中的属性和方法书写到类的里面的操作即为封装 ② 封装可以为属性和方法添加为私有权限&#xff0c;不能直…

Midjourney新功能:角色参照指南

基本概念 角色参照&#xff08;Character Reference&#xff09;&#xff1a;这个功能允许用户在不同的图像生成中保持给定参照角色的一致性。适用模型&#xff1a;适用于Midjourney V6和Niji6型号。 功能亮点 跨风格一致性&#xff1a;可以在不同风格&#xff08;如动漫风、…

数据泄露态势(2024年2月)

监控说明&#xff1a;以下数据由零零信安0.zone安全开源情报系统提供&#xff0c;该系统监控范围包括约10万个明网、深网、暗网、匿名社交社群威胁源。在进行抽样事件分析时&#xff0c;涉及到我国的数据不会选取任何政府、安全与公共事务的事件进行分析。如遇到影响较大的伪造…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的安全帽检测系统(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;开发先进的安全帽识别系统对提升工作场所的安全性至关重要。本文详细介绍了使用深度学习技术创建此类系统的方法&#xff0c;并分享了完整的实现代码。系统采用了强大的YOLOv8算法&#xff0c;并对其与YOLOv7、YOLOv6、YOLOv5的性能进行了详细比较&#xff0c;…

Windows主机多网卡访问内外网

1&#xff1a;在实际生产环境有可能需要某台机器既能访问公司的内部网络也要能够访问外网。 2&#xff1a;首先机器要有两块网卡根据实际情况分别设置内外网的IP地址&#xff0c;掩码&#xff0c;网关&#xff0c;DNS等信息。设置完成时会出现下面的提示。 3&#xff1a;打开命…

空间计算综合指南

空间计算&#xff08;spatial computing&#xff09;是指使人类能够在三维空间中与计算机交互的一组技术。 该保护伞下的技术包括增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;。 这本综合指南将介绍有关空间计算所需了解的一切。 你将了解 AR、VR…