猫和老鼠主题的简单网页（HTML+CSS)

共26个文件

jpg：17个

css：4个

html：3个

html

需积分: 5 21 浏览量 2024-01-31 17:44:00 上传评论收藏 7.4MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

猫和老鼠3当前时间轮播图表单验证.zip （26个子文件）

css

全局.css 1KB

首页.css 2KB

角色介绍.css 1KB

html

角色介绍.html 4KB

首页.html 4KB

images

两只鞋太太.jpg 32KB

10.jpg 25KB

6.jpg 23KB

杰瑞.jpg 24KB

1.jpg 22KB

banner3.jpg 91KB

泰克.jpg 11KB

汤姆.jpg 39KB

video.mp4 6.75MB

5.jpg 68KB

斯派克.jpg 13KB

banner1.jpg 154KB

8.jpg 16KB

泰菲.jpg 29KB

banner2.png 79KB

3.jpg 25KB

7.jpg 12KB

9.jpg 48KB

4.jpg 23KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>猫和老鼠</title> <link rel="stylesheet" href="../css/全局.css"> <link rel="stylesheet" href="../css/首页.css"> </head> <body> <div class="bod"> <div class="main"> <div class="nav"> <a href="../html/首页.html"class="looking" >首页</a> <a href="../html/角色介绍.html">角色介绍</a> <a href="../html/登录.html">登录</a> </div> <div class="container"> <div class="shang"> <img src="../images/banner1.jpg" alt=""> <img src="../images/banner2.png" alt=""> <img src="../images/banner3.jpg" alt=""> <div class="controls"> <button class="prevBtn"><<</button> <button class="nextBtn">>></button> </div> </div> <div class="zhong"> <div class="lside"> <video src="../images/video.mp4" width="100%" controls></video> </div> <div class="rside"> <div class="title"> <p>猫和老鼠</p> </div> <div class="content"> 《猫和老鼠》（Tom and Jerry）是米高梅电影公司于1939年制作的一部动画片，该片由威廉·汉纳、约瑟夫·巴伯拉编写，弗雷德·昆比制作。《猫和老鼠》以闹剧为特色，描绘了一对水火不容的冤家：汤姆和杰瑞猫鼠之间的战争，片中的汤姆经常使用狡诈的诡计来对付杰瑞，而杰瑞则时常利用汤姆诡计中的漏洞逃脱他的迫害并给予报复。首部剧集《甜蜜的家》于1940年2月10日在美国首播。《猫和老鼠》的故事情节围绕着一对常见的家猫汤姆和老鼠杰瑞而展开，汤姆有一种强烈的欲望，总是不断努力的去捉同居一室的老鼠杰利，并不断地努力驱赶着这位讨厌的房客。尽管总是失败，但汤姆在追逐中得到的乐趣远远超过了捉住杰瑞。同时，汤姆在片中经常使用斧头、锤子、炸药、鞭炮等暴力工具或陷阱来对付杰瑞。但杰瑞非常机灵，时而使汤姆的诡计适得其反，让汤姆自食其果。在这部动画中，没有动物世界中恃强凌弱的残酷，只有两个邻居之间的日常琐事和纷争。[1] </div> </div> </div> <div class="xia"> <div class="photo photo1"></div> <div class="photo photo2"></div> <div class="photo photo3"></div> <div class="photo photo4"></div> <div class="photo photo5"></div> <div class="photo photo6"></div> <div class="photo photo7"></div> <div class="photo photo8"></div> </div> </div> </div> <div class="foot"> </div> </div> </body> <script> const images = document.querySelectorAll('.shang > img'); let currentImageIndex = 0; function showImage(index) { images[currentImageIndex].classList.remove('active'); currentImageIndex = (index + images.length) % images.length; images[currentImageIndex].classList.add('active'); } function showNextImage() { showImage(currentImageIndex + 1); } function showPrevImage() { showImage(currentImageIndex - 1); } document.querySelector('.nextBtn').addEventListener('click', showNextImage); document.querySelector('.prevBtn').addEventListener('click', showPrevImage); const interval = setInterval(showNextImage, 2000); document.querySelectorAll('.controls button').forEach(btn => { btn.addEventListener('click', () => { clearInterval(interval); }); }); </script> </html>

评论收藏

内容反馈