堃堃自己的模仿练习

最新推荐文章于 2022-03-29 11:00:06 发布
最新推荐文章于 2022-03-29 11:00:06 发布
阅读量268 收藏
点赞数
分类专栏： jQuery 前端基础 堃堃的练习 文章标签： 练习 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43511842/article/details/88613679
版权

老师说，想打好代码，先从模仿开始，之后就是不断的练习
那么我今天模仿了一个网站的一小部分，效果大概如下：在这里插入图片描述
网址：http://www.yixun.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/jQueryhomework1.css"rel="stylesheet"/>
    <title>jQuery作业1</title>
</head>
<body>
        <div class="page">
            <!-- 首部 -->
            <div class="header">
               <span class="title">
                    <span class="redText">精</span>
                    <span class="normalText">选商城</span>    
               </span>   
               <a href="#" class="more">查看更多</a>
               <img class="icon_more" src="img/more.png"/>
            </div>    
            <!-- 精选商品 -->
            <div class="bestgoods">
            <div class="good">
                <div class="pic">
                    <img  class = "goodPic" src="http://m.360buyimg.com/mobilecms/s200x200_jfs/t10642/333/432359840/445149/d2636c57/59cf55c2N9914a0c2.jpg" alt="追剧玩手游，5.5英寸起的大屏手机推荐">
                   
                </div> 
                <p class="des">
                            追剧玩手游，5.5英寸起的大屏手机推荐
                    </p>
                <p class="author">
                        <img class="headPic" src="http://m.360buyimg.com/mobilecms/s200x200_jfs/t3655/165/1936450473/10042/1c6ae025/583e380dN5129bfd4.jpeg">
                        <span class="authorName">数码时光猎人</span>
                        <span class="readnum">459493</span>
                        <img class="readPic" src="img/readnum.png"/>
                    </p>
                    <div class="coverIt"></div>
            </div>
            <div class="good">
                    <div class="pic">
                            <img src="http://m.360buyimg.com/mobilecms/jfs/t1/31571/28/5819/118570/5c88fb6dE8b5d9156/393f093236eaf946.jpg" alt="“大”才过瘾！投影仪青春版发布：可投120寸大屏">            
                    </div>
                    <p class="des">
                            “大”才过瘾！投影仪青春版发布：可投120寸大屏
                        </p>
                    <p class="author">
                            <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t1/31820/3/1464/15441/5c51141bEd4f58471/3de33b92eb4456d5.jpg">
                            <span class="authorName">以梦为马逐鹿天下</span>
                            <span class="readnum">15</span>
                            <img class="readPic" src="img/readnum.png"/>
                        </p>
                        <div class="coverIt"></div>
                </div>
                <div class="good">
                        <div class="pic">
                                <img src="http://m.360buyimg.com/mobilecms/jfs/t1/25219/11/10717/1006510/5c88f930E06e055e1/6ee7f9088b3c2683.png" alt="春游季：JBL给你带来别样户外游玩体验！">                                
                        </div>
                        <p class="des">
                                春游季：JBL给你带来别样户外游玩体验！
                            </p>
                            <p class="author">
                                    <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t3613/196/2356550397/111139/15ccc984/584e8ff0N6137083e.jpg">
                                    <span class="authorName">电子潮流</span>
                                    <span class="readnum">11</span>
                                    <img class="readPic" src="img/readnum.png"/>
                                </p>
                                <div class="coverIt"></div>
                    </div>
                    <div class="good">
                            <div class="pic">
                                    <img src="http://m.360buyimg.com/mobilecms/jfs/t1/32579/32/5868/29708/5c88f965E8914b9e4/3479689ba530d262.jpg" alt="不同性能不同需求的笔记本，安利几款人气爆棚的电脑">

                            </div>
                            <p class="des">
                                    不同性能不同需求的笔记本，安利几款人气爆棚的电脑
                                </p>
                                <p class="author">
                                        <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t1/31820/3/1464/15441/5c51141bEd4f58471/3de33b92eb4456d5.jpg">
                                        <span class="authorName">数码时光猎人</span>
                                        <span class="readnum">13</span>
                                        <img class="readPic" src="img/readnum.png"/>
                                    </p>
                                    <div class="coverIt"></div>
                        </div>
                        
    
                        <!-- 第二排 -->
                        <div class="good">
                                <div class="pic">
                                        <img src="http://m.360buyimg.com/mobilecms/jfs/t1/21928/1/10704/107935/5c88fec4Ec9a59114/6ce72d801fe200ef.jpg" alt="简单大方，外观出众酷、酷冷至尊NR600全塔机箱">
    
                                </div>
                                <p class="des">
                                        简单大方，外观出众酷、酷冷至尊NR600全塔机箱
                                    </p>
                                <p class="author">
                                        <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t5680/246/6780256973/100727/987e247b/596c6e3eNae991d72.jpg">
                                        <span class="authorName">蘑菇测评</span>
                                        <span class="readnum">8</span>
                                        <img class="readPic" src="img/readnum.png"/>
                                    </p>
                                    <div class="coverIt"></div>
                            </div>
                            <div class="good">
                                    <div class="pic">
                                            <img src="http://m.360buyimg.com/mobilecms/jfs/t1/15567/12/10704/90554/5c88f6e5Edf1caad4/d6d999e88a23f203.jpg" alt="一起战个痛快，迪兰RX 580战神版简评！">
                                    </div>
                                    <p class="des">
                                            一起战个痛快，迪兰RX 580战神版简评！
                                        </p>
                                    <p class="author">
                                            <img class="avatar" src="http://m.360buyimg.com/mobilecms/jfs/t8932/10/1944707292/106755/ee512d2f/59c394d5N9ad1b35c.png">
                                            <span class="authorName">MI好物君</span>
                                            <span class="readnum">8</span>
                                            <img class="readPic" src="img/readnum.png"/>      
                                        </p>
                                        <div class="coverIt"></div>
                                </div>
                            <div class="good">
                                    <div class="pic">
                                            <img src="http://m.360buyimg.com/mobilecms/jfs/t1/20655/15/10739/132529/5c88f7ceE3756b198/38aea49172b0cd08.JPG" alt="巨屏影幕视野更开阔，激光投影成家庭影视新欢！">
                                    </div>
                                    <p class="des" >
                                            不同性能不同需求的笔记本，安利几款人气爆棚的电脑
                                        </p>
                                    <p class="author">
                                            <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t28648/160/626547592/21427/e8cc275f/5bfa0257N685e8119.jpg">
                                            <span class="authorName">趣味淘</span>
                                            <span class="readnum">10075</span>
                                            <img class="readPic" src="img/readnum.png"/>
                                        </p>
                                        <div class="coverIt"></div>
                                </div>
                                <div class="good ">
                                        <div class="pic">
                                                <img src="http://m.360buyimg.com/mobilecms/jfs/t1/27209/4/10591/85125/5c88efb7E19ca190f/e8a2efc7cdd3e13b.jpg" alt="领略新鲜潮玩乐趣，给极客范打造惊喜之旅">
            
                                        </div>
                                        <p class="des">
                                                领略新鲜潮玩乐趣，给极客范打造惊喜之旅
                                            </p>
                                        <p class="author">
                                                <img class="headPic" src="http://m.360buyimg.com/mobilecms/jfs/t25237/100/566928765/41540/5db5188e/5b7414eanff8e478b.jpg">
                                                <span class="authorName">物华天宝</span>
                                                <span class="readnum">84</span>
                                                <img class="readPic" src="img/readnum.png"/>
                                        <div class="coverIt"></div>
                                                
                                            </p>
                                    </div>                  
                    </div>
        </div>

            

        <script src="jquery-3.3.1.min.js"></script>
        <script>
        $(function(){
                $(".good").hover(function(){
                    $(this).find(".des").css("text-decoration","underline");
                    $(this).find(".authorName").css("text-decoration","underline");
                    $(this).find(".coverIt").fadeIn(600);

                },function(){
                    $(this).find(".des").css("text-decoration","none");
                    $(this).find(".authorName").css("text-decoration","none");
                    $(this).find(".coverIt").fadeOut(600);

                })
        })
        </script>
</body>
</html>

这里用到了jQuery的动画fadeOut和fadeIn哦！

赵俸堃是我的名字
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
内联元素<span>怎样居中显示，块级元素和内联元素~
qq_43511842的博客
03-05 1151
今天先来解释一下什么是内联元素，什么是块元素 百度百科中怎么写呢： 块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。 内联元素又名行内元素(inline element)，和其对应的是块元素(block el...
c语言程序 姚宏坤 答案,项堃
weixin_28951585的博客
05-20 86
教材坚持 工作过程系统化 职业教育理念下的 一事三成 原则，为每个项目学习任务设计了 相关知识 带着学 、 项目实施 引导练 、 项目实训 独立做 等学习环节，可以帮助学生 从点到面 、 从易到难 、 从生到熟 逐步掌握各配置命令，克服了命令难记这一学习障碍，符合 以学生为主体的工作导向式 教学模式特点，因此本教材非常适合直接应用于 教、学、做 一体化课堂。¥54.80定价：¥59.00(9.29...
哈希树HashTree 罗堃_吴朝宏
小小俊
06-01 414
https://wenku.baidu.com/view/16b2c7abd1f34693daef3e58.html 质数分辨定理：n个不同的质数可以“分辨”的连续整数的个数和他们的乘积相等。“分辨”就是指这些连续的整数不可能有完全相同的余数序列。 余数分辨定理：任意选取n个互不相同的自然数，可以“分辨”的连续整数的个数和LCM相等。 ...
冯仕堃：预训练模型哪家强？百度知识增强大模型探索实践！
Kaiyuan_sjtu的博客
01-04 536
作者|冯仕堃百度主任架构师来源|DataFunTalk导读：近年来，预训练语言模型在自然语言处理领域发展迅速，并获得广泛应用。本文将介绍百度基于知识增强的语义理解ERNIE的...
模仿口才的最佳训练方法
王堃阳口才前线
03-29 210
《模仿口才的最佳训练方法》 公众号:“王堃阳口才前线”专注演讲口才20年,学演说找王堃阳,专治各种不会说! 我们每个人从小就会模仿，模仿大人做事，模仿大人说话。其实模仿的过程也是一个学习的过程。我们小时候学说话是向爸爸、妈妈及周围的人学习，向周围的人模仿。那么我们练口才也可以利用模仿法，向这方面有专长的人模仿。这样天长日久，我们的口语表达能力就能得到提高。下面是小编为大家收集的关于“模仿口才的最佳训练方法”，欢迎学习参考。 ①模仿专人 在生活中找一位口语表达能力强的人，请他讲几段最精彩的话，录下来，供
321031238叶翔堃.psd
04-12
321031238叶翔堃.psd
堃博医疗-B 上市招股说明书.pdf
09-15
堃博医疗-B 上市招股说明书
空气质量的改善 叶堃鹏.pptx
09-23
空气质量的改善 叶堃鹏.pptx
严堃蓥-202012904635-实验二.doc
05-04
严堃蓥-202012904635-实验二.doc
袁磊老师的课，小方的jQuery笔记（五）---json&ajax，老周在边上陪着，真好！
qq_43511842的博客
03-14 888
json+ajax 一、复习一下上学期学过的原生： JSON.stringify():的意思是将 JavaScript对象转换为字符串，从一个对象中解析出字符串 JSON.parse(text): 把一个字符串解析为JavaScript的对象，从服务器端获取的是字符串，那么我们需要把它变成JavaScript对象，这样js才能读取它。 jQuery.getJSON(url，function（）)...
袁磊老师的课，VUE（一）
qq_43511842的博客
04-16 257
教学目标： 一、前端框架发展 二、Vue特点 三、了解Vue的版本和常用学习资源 老师说：vue需要大家多多的练习，老师讲的会比较少一些 详细内容： 1.MV*模式 在前端技术的快速发展过程中，MVC(模型-视图-控制器）、MVP（模型-视图-表示器）、MVVM（模型-视图-视图模型）也得到了很多使用。 ①MVC全名是Model View Controller，一种软件设计典范，用一种业务逻...
袁磊老师的课，ES6（一）
qq_43511842的博客
03-26 253
老师说：这个部分，应该是在这个阶段，最有市场价值的部分。 没有ES6，就学各种框架，可能会越学越困难 ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 {let a = 10; var b = 1} //a 只在括号内有效 const声明一个只读的常量。一旦声明，常量的值就不能改变。 const PI = 3.14.5...
袁磊老师的课，Vue全家桶（一）
qq_43511842的博客
05-14 252
一、单页面应用spa 就是只有一张web页面的应用，就是加载单个html。 优点：页面切换快 缺点：首屏时间稍慢，SEO（搜索引擎优化）差 “搜索引擎还读不懂单页面，搜索引擎擅长读的是多页面” 二、路由 vue-router 基本使用： <router-link to="/home">主页</router-link> <router-view...
袁磊老师的课，小方的jQuery笔记（二），老周在边上陪着，真好！
qq_43511842的博客
03-05 245
3月5日 老师说 1.你的jQuery文件一定要和html文件放在一个文件夹下！ 2. var str = &quot;&amp;lt;div class='box'&amp;gt;&quot;这里，注意双引号中不能再用双引号，只能用单引号！ 3. 表单操作要用val（）来获取 var sr = $(&quot;#disname&quot;).val(); // val是value的缩写，可以用val来获取表单 如果该方法未设置参数
袁磊老师的课，小方的jQuery笔记（三），老周在边上陪着，真好！
qq_43511842的博客
03-07 245
常见效果与jQuery动画 1. 常见效果 hover效果 according手风琴效果 tab选项卡效果 下拉菜单 基本动画 2.一些方法 find（）//查找 后代元素里查找 prev（）//上一个元素 next（）//下一个 siblings（）//兄弟元素 children（）//子元素，只在子元素中 show（）//显示 hide（）//隐藏 3.hover事件 $(&quot; &quot;).hove...
袁磊老师的课，小方的jQuery笔记（四），老周在边上陪着，真好！
qq_43511842的博客
03-12 222
jQuery动画 一、各种动画 slideDown() slideUp() fadeOut() 渐渐消失 fageIn() 渐渐出现 toggle() 已经被废除了 slideToggle() fadeTo() animate() 二、下拉菜单 概要： 一定是父对象：相对定位 ------position：relative 下拉菜单：绝对定位 -------position：abso...
袁磊老师的课，VUE（五）
qq_43511842的博客
05-07 201
一、watch 当每次监听到值发生改变时，执行函数 适用于，当数据发生变化时，执行异步操作或较大开销操作的情况 写法： watch:{ name:{ handler(newName, oldName){}, deep:true, immediate:true } } 练习：电脑瓦特了，没写什么备注… <!DOCTYPE html> <html lang=...
可以用哪堅个视埼描述埻堃堄统的埿堄埾构？
最新发布
06-09
可以使用物理视图来描述软件系统的部署结构。物理视图是“4+1”视图模型中的一个视图，主要描述软件系统的物理部署和配置，包括系统的部署图、网络拓扑图等。在物理视图中，可以展示软件系统的各个组件、服务器、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值