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

ops/2024/10/19 17:33:28/

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

文章目录

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

相关文章

【时间盒子】-【2.准备】HarmonyOS 开发前需要准备什么?

零基础新手或转行进入鸿蒙生态应用的开发者&#xff0c;请提前准备以下内容&#xff1a; 一、注册华为帐号 此帐号在华为官方各平台通用&#xff0c;比如&#xff1a;华为手机、华为商城、华为云、华为开发者联盟等等。 https://id1.cloud.huawei.com/CAS/portal/userRegist…

软件测试 | 测试用例Ⅱ

基于需求的设计方法 测试人员接到需求后&#xff0c;要对需求进行分析和验证&#xff0c;从合理的需求中进一步分析细化需求&#xff0c;从细化的需求中找出测试点&#xff0c;根据这些测试点再去设计测试用例。 上面就是根据需求文档先设计出来的初步的测试用例&#xff0c;而…

华为od全面介绍!!!

三分钟带你全面了解华为OD 【合同及管理】签约方为科锐国际/外企德科&#xff08;人力服务公司&#xff09;&#xff0c;劳动合同期为4年&#xff0c;试用期6个月。员工关系合同管理、五险一金、考勤发薪由科锐国际/外企德科负责&#xff1b;定级定薪、员工培训、工作安排、绩…

AWTK 1.8 发布

1.8 版本更新 1. 细节完善 大量细节完善请参考 最新动态 2. 新增文档 拖入文件事件如何使用 packed image如何自定义资源加载方式如何使用 CMake 构建 AWTK 应用如何将资源编译到应用程序并使用它们关于自定义控件的 offset 的使用注意事项 3. 新增重要特性 使用 svgtiny 解…

vue-admin-template pan版使用方法

新建文件夹&#xff0c;创建后端子文件夹&#xff0c;使用命令行创建django后端&#xff1a;django-admin startproject 后端名称 首先下载vue-admin-template-master文件&#xff0c;将其复制进项目的前端文件夹&#xff0c;在命令行中切换到前端目录&#xff0c;执行npm ins…

007.Python爬虫系列_初识爬虫

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈 PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)文章合集 👈👈 Oracle数…

前端怎么实现大模型对话

说一下前端怎么实现大模型&#xff0c;就是像什么通义千问文心一言GPT那样的&#xff0c;这个我之前做过啊就是这样的&#xff0c;这是我们以前在公司做的&#xff0c;对大家以后开发这种东西有一些参考&#xff0c;那我们当时做的时候是没有参考的&#xff0c;网上有这种相关的…

【Python报错已解决】“ValueError: If using all scalar values, you must pass an index“

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言&#xff1a;一、问题描述1.1 报错示例&#xff1a;以下是一个可能引发上述错误的代码示例。1.2 报错分析&#x…