HTML静态网页成品作业(HTML+CSS)——动漫猫和老鼠网页(1个页面)

news2024/11/27 14:45:18

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=猫和老鼠, initial-scale=1.0">
	<title>猫和老鼠</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	
	
	
	<div class="c">
		<div class="t">
			猫和老鼠
		</div>
		
		<div class="b">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		
		<div class="c-box">
			<div class="c-title">动画介绍</div>
			<div class="c-jieshao">
				<div class="c-jieshao-img">
					<img src="./images/1.jpg" alt="">
				</div>
				<div class="c-jieshao-text">
					<p>
						《猫和老鼠》以闹剧为特色,描绘了一对水火不容的冤家:汤姆和杰瑞猫鼠之间的战争,片中的汤姆经常使用狡诈的诡计来对付杰瑞,而杰瑞则时常利用汤姆诡计中的漏洞逃脱他的迫害并给予报复 。
					</p>
					<p>
						《猫和老鼠》的故事情节围绕着一对常见的家猫汤姆和老鼠杰瑞而展开,汤姆有一种强烈的欲望,总是不断努力的去捉同居一室的老鼠杰瑞,并不断地努力驱赶着这位讨厌的房客。尽管总是失败,但汤姆在追逐中得到的乐趣远远超过了捉住杰瑞。同时,汤姆在片中经常使用斧头、锤子、炸药、鞭炮等暴力工具或陷阱来对付杰瑞。但杰瑞非常机灵,时而使汤姆的诡计适得其反,让汤姆自食其果。在这部动画中,没有动物世界中恃强凌弱的残酷,只有两个邻居之间的日常琐事和纷争。
					</p></div>
			</div>
		</div>
		
		
		
		<div class="c-box">
			<div class="c-title">动画角色</div>
			<div class="c-juese">
				<div class="c-juese-img"><img src="./images/a.webp" alt=""></div>
				<div class="c-juese-img"><img src="./images/b.webp" alt=""></div>
				<div class="c-juese-img"><img src="./images/c.webp" alt=""></div>
				<div class="c-juese-img"><img src="./images/d.webp" alt=""></div>
			</div>
		</div>
		
		
		<div class="f">
			© Copyright 猫和老鼠 All Rights Reserved
		</div>
	</div>
</body>
</html>

五、源码获取

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

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

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

相关文章

5 个去除图像水印的工具学习分享

水印可能是保护图像并防止它们成为未经授权使用的受害者的最常见技术。 但是&#xff0c;在某些情况下您可能需要从图像中删除水印。也许它遮挡了照片上的一些重要细节&#xff0c;或者您可能希望它&#xff08;水印&#xff09;位于图像的另一侧&#xff09;。无论出于何种原…

蓝桥练习题总结(一)字母图形、完美的代价、01串、序列求和

目录 一、字母图形 二、完美的代价 三、01字串 四、序列求和 一、字母图形 问题描述 利用字母可以组成一些美丽的图形&#xff0c;下面给出了一个例子&#xff1a; ABCDEFG BABCDEF CBABCDE DCBABCD EDCBABC 这是一个5行7列的图形&#xff0c;请找出这个图形的规律&#xff…

jmeter之Http请求默认值与Http信息头管理器-第五天

1.Http请求默认值 点击测试计划-右键-添加-配置元件-Http请求默认值 http请求默认值&#xff1a;设置重复的字段 2.Http信息头管理器 点击测试计划-右键-添加-配置元件-Http信息头管理器 http信息头管理器&#xff1a; 新增修改实现时提交的数据是JSON 格式的&#xff0c;…

OpenResty使用Lua大全(十二)实战: 动手实现一个网关框架

文章目录 系列文章索引一、网关基本介绍1、网关常用功能2、本次实战目标3、orange介绍4、安装orange 二、动手实现网关1、主入口&#xff08;1&#xff09;nginx的conf配置&#xff08;2&#xff09;网关lua&#xff1a;gateway.lua&#xff08;3&#xff09;启动 2、gateway网…

camunda 与 pycamunda学习

camunda 与 pycamunda 相关链接&#xff1a; camunda 官方社区&#xff1a;https://docs.camunda.org/manual/7.17/ 官方社区提供的REST_API:https://docs.camunda.org/manual/7.17/reference/rest/ GITHUB 社区&#xff1a;https://github.com/camunda-community-hub Git…

【机器学习】机器学习实验方法与原则(统计有效性检验详解)

统计有效性检验 假设的评估检验&#xff1a;问题1 • 效果估计 • 给定一个假设 在有限量数据 上的准确率 • 该准确率是否能准确估计 在其它未见数据上 的效果&#xff1f; 假设的评估检验&#xff1a;问题2 • h 1 在数据的一个样本集上表现优于 h 2 • h 1 总体…

ubuntu下samba匿名读写服务器

目的&#xff1a; 局域网内&#xff0c;ubuntu下&#xff0c;创建SAMBA文件共享服务器。匿名读写权限。为了开发项目组文件共享传输方便。 环境&#xff1a; X86_64电脑一台。 操作系统&#xff1a; Ubuntu 20.04 LTS 64位。 安装samba $ sudo apt-get install samba创建…

缅甸的大开发时代即将到来 缅文wordpress主题模板

Simplify WordPress外贸网站模板 Simplify WordPress外贸网站模板&#xff0c;简洁实用的外贸公司wordpress外贸建站模板。 https://www.jianzhanpress.com/?p4565

爬虫(七)

1.批量爬取知网数据 lxml:是 Python 的一个功能强大且易用的 XML 和 HTML 处理库。它提供了简单又轻巧的 API,使得解析、构建和操作 XML 和 HTML 文档变得非常方便。lxml 库通常用于处理 XML 和 HTML 文档,例如解析网页、处理配置文件等。openpyxl:是 Python 中用于操作 Ex…

Basic RNN

文章目录 回顾RNNRNN CellRNNCell的使用RNN的使用 RNN例子使用RNN Cell实现使用RNN实现 嵌入层 Embedding独热向量的缺点Embedding LSTMGRU(门控循环单元)练习 回顾 DNN&#xff08;全连接&#xff09;&#xff1a;和CNN相比&#xff0c;拥有巨大的参数量&#xff0c;CNN权重共…

哔哩哔哩秋招Java二面

前言 作者&#xff1a;晓宜 个人简介&#xff1a;互联网大厂Java准入职&#xff0c;阿里云专家博主&#xff0c;csdn后端优质创作者&#xff0c;算法爱好者 一面过后面试官叫我别走&#xff0c;然后就直接二面&#xff0c;二面比较简短&#xff0c;记录一下&#xff0c;希望可以…

charles使用教程 ---- 抓取https请求 修改请求

目录 简介 将 Charles 设置成系统代理 截取 Https 通讯信息 配置想要抓取数据的地址 在电脑上安装证书 设置HTTP和HTTPS代理 抓包工具charles修改请求和返回数据 简介 Charles 是在 Mac 下常用的网络封包截取工具&#xff0c;在做 移动开发时&#xff0c;我们为了调试与…

MNN createSession 之创建流水线后端(四)

系列文章目录 MNN createFromBuffer&#xff08;一&#xff09; MNN createRuntime&#xff08;二&#xff09; MNN createSession 之 Schedule&#xff08;三&#xff09; MNN createSession 之创建流水线后端&#xff08;四&#xff09; MNN Session::resize 之流水线编码&am…

【刷题】滑动窗口入门

送给大家一句话&#xff1a; 那脑袋里的智慧&#xff0c;就像打火石里的火花一样&#xff0c;不去打它是不肯出来的。——莎士比亚 滑动窗口入门 认识滑动窗口Leetcode 209. 长度最小的子数组题目描述算法思路 Leetcode 3. 无重复字符的最长子串题目描述算法思路 Leetcode 1004…

Invicti v24.3.0 for Windows - Web 应用程序安全测试

Invicti v24.3.0 for Windows - Web 应用程序安全测试 Invicti Standard 12 Mar 2024 v24.3.0 请访问原文链接&#xff1a;https://sysin.org/blog/invicti/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Invicti 是一种自动…

什么是 JVM 双亲委派机制?

什么是 JVM 双亲委派机制&#xff1f; 题目 什么是 JVM 双亲委派机制&#xff1f; 推荐解析 通俗的说&#xff0c;双亲委派模型&#xff0c;就是加载类的时候&#xff0c;先请求其父类加载器去加载&#xff0c;如果父类加载器无法加载类&#xff0c;再尝试自己去加载类。如…

npm install不成功

解决办法&#xff1a; $env:NODE_OPTIONS"--openssl-legacy-provider" npm run dev

HarmonyOS应用开发实战 - Api9 拍照、拍视频、选择图片、选择视频、选择文件工具类

鸿蒙开发过程中&#xff0c;经常会进行系统调用&#xff0c;拍照、拍视频、选择图库图片、选择图库视频、选择文件。今天就给大家分享一个工具类。 1.话不多说&#xff0c;先展示样式 2.设计思路 根据官方提供的指南开发工具类&#xff0c;基础的拍照、拍视频、图库选照片、选…

【mybatis】objectwrapper解读

简介 在 MyBatis 中&#xff0c;ObjectWrapper 是一个关键的接口&#xff0c;用于详细封装了对象的属性信息。ObjectWrapper 主要用于内部操作&#xff0c;它抽象了对象的属性操作&#xff0c;使得 MyBatis 能够统一处理原生类型、Bean 对象以及 Map 集合等。 类图展示 主要功…

1、初识JVM

一、JVM是什么&#xff1f; JVM的英文全称是 Java Virtual Machine&#xff0c;其中文译名为Java虚拟机。它在本质上就是是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 JVM执行流程如下 二、JVM有哪些功能&#xff1f; 2.1 解释和运行 对字节码文…