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

devtools/2025/1/15 21:38:56/

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

文章目录

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

相关文章

React教案

ECMAScript6 1、ES6简介 1.1、什么是ES6 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 1.2、ECMAScript和JavaScript的关系 一…

idea获取当前项目git仓库地址

简介 在idea中快速获取当前项目的远程仓库地址 方案一 右键项目选择Git选择Manage Remotes弹框中的URL就是远程仓库地址 方案二 打开terminal 命令行直接Git命令查询 git remote -v— 结束

【数据结构】Map的使用与注意事项

文章目录 概念模型Map 的使用put() 和 get()getOrDefault()remove()keySet()entrySet() 注意事项 概念 Map 和 set 是一种专门用来进行搜索的容器或者数据结构&#xff0c;其搜索的效率与其具体的实例化子类有关。 以前常见的搜索方式有&#xff1a; 直接遍历&#xff0c;时间…

版本控制工具git

版本控制工具 git 数据库 > 有代码历史版本 > 仓库 每个文件都是不同的历史版本&#xff0c;以便恢复 集中式版本控制系统 例如&#xff1a;SVN 缺陷&#xff1a; 1.依赖于中心服务器 分布式的版本管理系统 只有程序员用 git 只有需要在同步代码的时候需要联网 程…

Golang 小项目(3)

Golang 小项目(3) 前言 本项目适合 Golang 初学者,通过简单的项目实践来加深对 Golang 的基本语法和 Web 开发的理解。 前往 torna.top 免费查阅 项目结构 D:. ├─ go.mod ├─ go.sum │ ├─cmd │ └─main │ main.go │ └─pkg├─config│ app.go│…

plugin-a: ERROR Missing publisher name.报错解决

在我编译项目扩展时&#xff0c;会报错如下 plugin-a: ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions 这是因为 VS Code 扩展要求在 package.json 中指定一个 publisher…

拓扑结构_替代SN6505推挽式低噪声隔离变压驱动器输出功率1-3W

PC6505 是一款专门为小体积、低待机功耗微功率隔离电源而设计的推挽式变压器驱动器&#xff0c;其外围只需匹配简单的输入输出滤波电容、隔离变压器和整流电路&#xff0c;即可实现 3.3V 或 5V 输入、3.3V~24V 输出、输出功率 1~3W 的隔离电源。 PC6505 芯片内部集成振荡器&am…

zStorage在海光CPU架构上的性能调优

前言 随着"信创"的东风吹遍大江南北&#xff0c;各家公司都开始了国产化的适配道路。zStorage团队当然也没有缺席&#xff0c;去年我们适配了华为的鲲鹏架构&#xff0c;整体性能水平达到了Intel架构的70%以上。今年我们开始着力于海光CPU架构的适配。与鲲鹏架构相比…