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

news2024/9/27 6:42:25

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/2077329.html

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

相关文章

大白话【8】WindowsServer2016搭建DNS服务

1.DNS服务功能介绍 2.DNS服务器搭建 2.0准备环境 2.1把该DNS服务器设置成静态IP 2.2修改主机名&#xff08;可省略&#xff09; 2.3安装DNS服务 DNS服务器名为www&#xff1b;IP为192.168.2.100 3.客户机测试 在网内可网络连通的客户机如何验证DNS服务器域名解析有效性&#…

SparkShop开源商城 uploadFile 任意文件上传漏洞复现

0x01 产品简介 SparkShop开源商城(也被称为星火商城)是一款基于ThinkPHP6和Element UI的开源免费可商用的高性能商城系统。适用于各类电商场景,包括但不限于B2C商城、新零售、分销商城等。无论是初创企业还是成熟品牌,都可以通过SparkShop快速搭建个性化独立商城,实现线上…

机器学习:SVM的代码实现

目录 前言 一、完整代码 二、输出结果 三、实现步骤解析 1.读取数据 2.创建模型并训练 3.可视化SVM结果 总结 前言 支持向量机&#xff08;SVM&#xff0c;Support Vector Machine&#xff09;是一种用于分类和回归的监督学习算法。它的核心思想是通过在特征空间中找到…

全网最适合入门的面向对象编程教程:39 Python 常用复合数据类型-集合

全网最适合入门的面向对象编程教程&#xff1a;39 Python 常用复合数据类型-集合 摘要&#xff1a; 在 Python 中&#xff0c;集合&#xff08;set&#xff09;是一种常用的复合数据类型。集合是一组无序且不重复的元素。与列表和元组不同&#xff0c;集合中的元素是无序的&am…

Webpack中的 HTTP 压缩

http压缩介绍 http压缩&#xff0c;是指一种内置在服务器和客户端之间改进传输速度和带宽利用率的方式。 http 压缩的流程&#xff1a; http 数据在服务器发送前&#xff0c;通过 webpack配置进行压缩&#xff1b;兼容的浏览器在向服务器发送请求时&#xff0c;在请求头中会…

JS Java Script知识简单记录

JS 参考 导入方式 内联样式&#xff0c;和css&#xff08;style&#xff09;很像 script标签导入&#xff0c;可以放在head或body标签中 外联样式 打印内容方式 console.log:在控制台显示 alert&#xff1a;网页弹窗 JS变量 var函数作用域&#xff0c;let是块作用域…

OpenCV杂项图像变换(2)线性混合函数blendLinear()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 执行两个图像的线性混合&#xff1a; dst ( i , j ) weights1 ( i , j ) ∗ src1 ( i , j ) weights2 ( i , j ) ∗ src2 ( i , j ) \texttt{…

FaceFormer嘴形同步论文复现

一、项目地址 https://github.com/EvelynFan/FaceFormer 二、复现过程 1、项目环境 系统&#xff1a;Ubuntu 18.04.1 python版本&#xff1a;Python 3.7 使用conda创建一个虚拟环境&#xff0c;安装requirements.txt中所需要的库 2、安装ffmpeg 教程网址&#xff1a;http…

kafka 入门

kafka 有分区和副本的概念&#xff0c;partition 3 表示有3个分区&#xff0c;replication 2 表示有2个副本 通过 --describe --topic test命令可以知道 test这个 主题的分区和副本情况&#xff0c;途中的replicas 表示 其他副本分区的情况&#xff0c;如第一条&#xff0c;t…

Docker 安装 Zookeeper + Kafka 保姆级教程

1.创建 docker-compose.yml 创建一个名为 docker-compose.yml 的文件&#xff0c;并添加以下内容&#xff1a; version: 3.6services:zookeeper:image: zookeeper:3.6container_name: zookeeperports:- "2181:2181"networks:- kafka-networkenvironment:ZOO_STANDA…

策略路由与路由策略

1.策略路由与路由策略 1.1 策略路由&#xff08;Policy Routing&#xff09; 1.1.1 定义 策略路由是一种根据特定策略或条件&#xff08;如源地址、目的地址、协议类型、接口、QoS等&#xff09;来决定网络包转发路径的技术&#xff0c;而不是单纯依赖传统的最短路径或最优路…

Linux-kubesphere(K8S)小白单机版搭建部署

目录 一、虚拟机环境设置 二、Kubesphere安装 1、安装工具 1&#xff09;Socat、conntrack、ebtables、ipset 2&#xff09;Docker 2、下载KubeKey 3、开始安装 参考官网&#xff1a;https://www.kubesphere.io/zh/docs/v3.4/quick-start/all-in-one-on-linux/ 一、虚拟机…

无监督3D场景理解,LLM 在 3D 场景理解中的应用与探索 !

构建能够理解和推理3D场景的模型很难&#xff0c;原因在于缺乏3D监督训练的数据来源和大规模训练策略。 在这项工作中&#xff0c;作者问到&#xff1a;在没有3D预训练的情况下&#xff0c;预训练语言模型中的知识如何被利用来理解和推理3D场景&#xff1f; 本工作的目标是确定…

HTML5有格调的个人介绍网站源码

文章目录 1.设计来源1.1 主界面1.2 个人信息界面1.3 项目统计界面1.4 我的相册界面1.5 朋友评价界面1.6 保持联系界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&a…

JAVA后端框架--【Mybatis】

框架 框架就是对技术的封装&#xff0c;将基础的技术进行封装&#xff0c;让程序员快速使用&#xff0c;提高开发效率 java后端框架 mybatis 对jdbc进行封装 背景介绍 mybatis是apache下面的一个开源项目&#xff0c;名为ibatis&#xff0c;2010年开发团队转移到谷歌旗下…

unity3d拼图__附带资源

要达到吸附效果则需要每个拼图上挂载碰撞体 达到整张图片的替换效果需要选中所有拼图部件把材质球拖上去 、 制作材料球 脚本挂载到随便一个空物体上 using System.Collections; using System.Collections.Generic; using UnityEngine;public class PinTu : MonoBehaviour …

Qt编写贪吃蛇小游戏完整项目

文章目录 前言一、Qt环境准备二、编写思路三、编写代码1、开始游戏界面代码1.1、绘制界面1.2、界面基本配置 2、选择难度界面代码3、游戏房间界面制作3.1、界面基础配置3.2、提前配置类中的成员变量3.2.1、QRectF 3.3、检测游戏是否结束的方法3.4、蛇移动的实现3.4.1、蛇向上移…

智慧农业——生成式人工智能如何改变农业

在数字化转型时代&#xff0c;农业不再仅仅与土壤、水和阳光有关。随着生成式人工智能的出现&#xff0c;农业正变得更加智能、高效&#xff0c;并且越来越以数据为主导。从以前所未有的准确度预测作物产量到开发抗病植物品种&#xff0c;生成式人工智能使农民能够做出精确的决…

c语言个人笔记

linux嵌入式C语言 课程链接: [史上最强最细腻的linux嵌入式C语言学习教程李慧芹老师] 0. gcc与vim的使用 gcc 指令 -Wall:显示所有警告 gcc默认的警告包括真正的错误&#xff1a;error和 告警warning 执行过程 c源代码.c -> 预处理(E) -> 编译(S) -> 汇编©.o…

Clickhouse集群化(五)clickhouse语法学习

1. 基础 1.1. 建表建库 CREATE DATABASE IF NOT EXISTS helloworld use default; CREATE TABLE IF NOT EXISTS system_cpu_info (uuid String, -- 主机的唯一标识符source String, -- 数据来源标识resource_pool Strin…