zuoye11.25.zip_Redis缓存穿透处理方案资源-CSDN下载

共12个文件

gif：5个

jpg：3个

html：2个

需积分: 5 193 浏览量 2022-11-29 15:40:23 上传评论收藏 134KB ZIP 举报

在IT行业中，我们经常需要处理各种类型的文件，其中包括压缩包文件。"zuoye11.25.zip" 是一个常见的ZIP格式压缩包，它通常用于集合多个文件或文件夹以便于存储、传输和管理。ZIP是一种流行的数据压缩格式，可以有效减小文件的大小，提高传输效率。在给定的压缩包内有两个文件，分别是“作业3：TAB切换”和“作业2：显示不同的图片”。这两个文件名揭示了它们可能与网页设计或前端开发相关。在现代Web应用中，"TAB切换"是一个常见的交互功能，允许用户通过点击不同的选项卡来展示不同的内容。这通常涉及到HTML、CSS和JavaScript的组合使用，特别是JavaScript库如jQuery或者现代框架如React、Vue或Angular中的组件。我们来看“作业3：TAB切换”。在网页设计中，实现TAB切换功能主要目的是优化用户体验，让用户能够方便地在多个相关内容间切换。HTML用于构建基本的结构，比如使用`<div>`元素创建每个选项卡和内容区域。CSS则用来设置样式，使界面美观，如设置颜色、边距、字体等。而JavaScript则负责添加交互性，监听用户的点击事件，隐藏或显示相应的内容区域。例如，可以使用JavaScript的`classList.add()`和`classList.remove()`方法来切换元素的可见性。 “作业2：显示不同的图片”可能涉及到图像的动态加载和替换。在Web页面上，图片可以由HTML的`<img>`标签来表示，其`src`属性指向图片的URL。若要根据条件显示不同图片，可以使用JavaScript来改变`<img>`标签的`src`属性。例如，可以通过用户的选择、按钮点击或其他用户交互来触发这个改变。这也可以扩展到响应式设计，根据设备类型或屏幕尺寸显示不同的图片版本，以优化加载速度和用户体验。这两个作业涵盖了前端开发中的基础概念和技术，包括HTML结构、CSS样式以及JavaScript交互。通过学习和实践这样的任务，开发者可以提升网页动态效果和用户体验的设计能力。对于初学者来说，理解这些基本原理并熟练运用，是迈向专业前端开发的重要步骤。同时，这也是日常网站和应用程序开发中不可或缺的技能，因为用户界面的易用性和视觉吸引力直接影响到产品的成功与否。

资源推荐

资源详情

资源评论

收起资源包目录

zuoye11.25.zip （12个子文件）

作业3：TAB切换

css

tab.css 1KB

images

bg.jpg 12KB

menu1.gif 491B

menu2.gif 215B

tab.html 3KB

作业2：显示不同的图片

css

scroll.css 680B

scroll.html 675B

images

5.gif 27KB

2.gif 24KB

1.gif 22KB

3.jpg 23KB

4.jpg 26KB

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>TAB切换</title> <link href="css/tab.css" rel="stylesheet"> </head> <body> <div class="div_bg"> <ul> <li id="bg1"><a class="white" onmousemove="chgtt(1);">小说</a></li> <li id="bg2"><a class="white" onmouseover="chgtt(2);">非小说</a></li> <li id="bg3" ><a class="white" onmouseover="chgtt(3);">少儿</a></li> </ul> <div id="book1" class="nxs"> <a href="#" target=_blank>1.时间旅行者的妻子</a><br> <a href="#" target=_blank>2.女心理师（下）</a><br> <a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br> <a href="#" target=_blank>4.女心理师（上）</a><br> <a href="#" target=_blank>5.小时候</a><br> <a href="#" target=_blank>6.追风筝的人</a><br> <a href="#" target=_blank>7.盗墓笔记2</a><br> <a href="#" target=_blank>8.输赢</a> </div> <div id="book2" class="nxs" > <a href="#" target=_blank>1.人生若只如初见</a><br> <a href="#" target=_blank>2.高效能人士的七个..</a><br> <a href="#" target=_blank>3.求医不如求己</a><br> <a href="#" target=_blank>4.人体使用手册</a><br> <a href="#" target=_blank>5.孩子，把你的手给我</a><br> <a href="#" target=_blank>6.别笑！我是英文单词书</a><br> <a href="#" target=_blank>7.人体经络使用手册</a><br> <a href="#" target=_blank>8.股市稳赚</a> </div> <div id="book3" class="nxs"> <a href="#" target=_blank>1.斯凯瑞金色童书・..</a><br> <a href="#" target=_blank>2.哈利・波特与“混..</a><br> <a href="#" target=_blank>3.不一样的卡梅拉（..</a><br> <a href="#" target=_blank>4.它们是怎么来的</a><br> <a href="#" target=_blank>5.五・三班的坏小子..</a><br> <a href="#" target=_blank>6.男生日记</a><br> <a href="#" target=_blank>7.哈利・波特与魔法石</a><br> <a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a> </div> </div> <script type="text/javascript"> function chgtt(d1){ //设当前显示层 var NowFrame; if(Number(d1)) { NowFrame=d1; } else { NowFrame=1; } for(var i=1;i<=3;i++){ if(i==NowFrame) { document.getElementById("book"+NowFrame).style.display ="block"; //当前层 document.getElementById("bg"+NowFrame).className="bg"; } else { document.getElementById("book"+i).style.display ="none"; //隐藏其他层 document.getElementById("bg"+i).className="nobg"; } } } window.onLoad=chgtt() ; </script> </body> </html>

评论收藏

内容反馈