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

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

文章目录

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

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

相关文章

Maxwell监听mysql的binlog日志变化写入kafka消费者

一. 环境&#xff1a; maxwell:v1.29.2 (从1.30开始maxwell停止了对java8的使用&#xff0c;改为为11) maxwell1.29.2这个版本对mysql8.0以后的缺少utf8mb3字符的解码问题&#xff0c;需要对原码中加上一个部分内容 &#xff1a;具体也给大家做了总结 &#xff1a; 关于v1.…

uniapp、vue2.6、H5,利用腾讯TRTC,快速跑通1v1视频功能

多人视频聊天室搭建&#xff0c;官网已有相关demo和案例&#xff0c;需要快速搭建多人聊天室直接进入以下网站&#xff1a; 实时音视频 Web & H5 (Vue2/Vue3)-视频通话&#xff08;含 UI&#xff09;-文档中心-腾讯云说明&#xff1a;https://cloud.tencent.com/document/…

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…

css 如何获取分辨率(使用@media查询)

在CSS中&#xff0c;可以使用media查询来应对不同的屏幕分辨率。例如&#xff0c;您可以为不同的屏幕宽度设置不同的样式规则。 /* 针对屏幕宽度小于600px的样式 */ media screen and (max-width: 599px) {body {background-color: lightblue;} }/* 针对屏幕宽度大于或等于600…

使用光标精灵更换电脑鼠标光标样式,一键安装使用

想要让自己在使用电脑时更具个性化&#xff0c;让工作和娱乐更加愉快&#xff0c;改变你的电脑指针光标皮肤可能是一个简单而有效的方法。很多人或许并不清楚如何轻松地调整电脑光标样式&#xff0c;下面我就来分享一种简单的方法。 电脑光标在系统里通常只有几种默认图案&…

流畅的 Python 第二版(GPT 重译)(一)

前言 计划是这样的&#xff1a;当有人使用你不理解的特性时&#xff0c;直接开枪打死他们。这比学习新东西要容易得多&#xff0c;不久之后&#xff0c;活下来的程序员只会用一个容易理解的、微小的 Python 0.9.6 子集来编写代码 。 Tim Peters&#xff0c;传奇的核心开发者&am…

Spring Web MVC入门(5)

响应 在我们前面的代码例子中, 都已经设置了响应数据Http响应结果可以是数据, 也可以是静态页面, 也可以针对响应设置状态码, Header信息等. 返回静态页面 创建前端页面index.html(注意路径) html代码如下: <!DOCTYPE html> <html lang"en"> <hea…

window下安装并使用nvm(含卸载node、卸载nvm、全局安装npm)

window下安装并使用nvm&#xff08;含卸载node、卸载nvm、全局安装npm&#xff09; 一、卸载node二、安装nvm三、配置路径和下载源四、使用nvm安装node五、nvm常用命令六、卸载nvm七、全局安装npm、cnpm八、遇到的问题 nvm 全名 node.js version management&#xff0c;顾名思义…

PyTorch 深度学习(GPT 重译)(二)

四、使用张量表示真实世界数据 本章内容包括 将现实世界的数据表示为 PyTorch 张量 处理各种数据类型 从文件加载数据 将数据转换为张量 塑造张量&#xff0c;使其可以作为神经网络模型的输入 在上一章中&#xff0c;我们了解到张量是 PyTorch 中数据的构建块。神经网络…

列表的循环遍历

列表的遍历 - while循环 既然数据容器可以存储多个元素&#xff0c;那么&#xff0c;就会有需求从容器内依次取出元素进行操作。 将容器内的元素依次取出进行处理的行为&#xff0c;称之为&#xff1a;遍历&#xff0c;迭代 如何遍历列表的元素呢&#xff1f; 可以使用前面…

阿里云轻量应用服务器和ECS服务器有啥区别?2024年整理对比表

阿里云服务器ECS和轻量应用服务器有什么区别&#xff1f;轻量和ECS优缺点对比&#xff0c;云服务器ECS是明星级云产品&#xff0c;适合企业专业级的使用场景&#xff0c;轻量应用服务器是在ECS的基础上推出的轻量级云服务器&#xff0c;适合个人开发者单机应用访问量不高的网站…

kubesphere all in one部署Jenkins提示1 Insufficient cpu

原因 devops 至少一个cpu&#xff08;1000m&#xff09;&#xff0c;但是其他资源已经占用了很多cpu CPU 资源以 CPU 单位度量。Kubernetes 中的一个 CPU 等同于&#xff1a; 1 个 AWS vCPU 1 个 GCP核心 1 个 Azure vCore 裸机上具有超线程能力的英特尔处理器上的 1 个超线程…

优雅的 Markdown

Markdown浅尝 一、勾选框 注意[]前后都要有空格 - [x] 干的漂亮 - [x] 吃饭 - [x] 写代码 - [ ] 睡觉 干的漂亮 吃饭 写代码 睡觉 二、列表 #无序列列表 * 换成 - 也行 * 你 * 你好 * 你好呀 - 你很好啊 你你好你好呀你很好啊 #有序列表 . 后面有个空格 1. 我 2. 是我 3.…

【Jenkins】data stream error|Error cloning remote repo ‘origin‘ 错误解决【亲测有效】

错误构建日志 17:39:09 ERROR: Error cloning remote repo origin 17:39:09 hudson.plugins.git.GitException: Command "git fetch --tags --progress http://domain/xxx.git refs/heads/*:refs/remotes/origin/*" returned status code 128: 17:39:09 stdout: 17…

CSS Module

CSS Module的作用&#xff1a;将CSS样式作用域限制在特定的组件范围内&#xff0c;以避免全局样式污染和命名冲突。 Vue中如何实现样式模块…

大数据开发--02.环境准备

一.准备三台linux虚拟机 1.分别取名node1,node2,node3 2.配置静态ip 这里以node1为例&#xff0c;配置静态ip地址&#xff0c;其他node2.node3一样 配置完成之后别忘记 systemctl restart network 3.在各自的/etc/hosts文件中编辑三个Ip地址 三台都要配置&#xff0c; 4.然…

express+mysql+vue,从零搭建一个商城管理系统16--收货地址(全国省市县名称和code列表)

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、新建config/area.js二、新建models/address.js三、新建dao/address.js四、新建routes/address.js五、添加地址六、查询用户地址列表总结 前言 需求&#xff1a;主要学习express&#xff0c;所以先写serv…

Kotlin runBlocking CoroutineScope synchronized简单死锁场景

Kotlin runBlocking CoroutineScope synchronized简单死锁场景 import kotlinx.coroutines.*fun main(args: Array<String>) {runBlocking {val lock1 Any()val lock2 Any()CoroutineScope(Dispatchers.IO).launch {repeat(10) {println("A-$it 申请 lock1...&quo…

C语言-----冒泡排序

今天&#xff0c;让我们来学习一下C语言中一个简单的排序算法------冒泡排序。 什么是冒泡排序呢&#xff1f; 冒泡排序是C语言中一个可以将一个数组的内容按照升序或者降序进行重新排列的算法。简单来说&#xff0c;是一种排序的思维。 冒泡排序的核心思想&#xff1a;让同…

Git原理与使用(一)

目录 前言 版本控制器 Linux下的Git的安装 Git的基本操作 创建Git本地仓库 配置Git 工作区、暂存区、版本库 添加与提交 查看.git文件 前言 我们可能要写多个文档对一个产品进行描述&#xff0c;但是一般情况下我们可能要写多个文档&#xff0c;比如&#xff1a; 初…