老师说,想打好代码,先从模仿开始,之后就是不断的练习
那么我今天模仿了一个网站的一小部分,效果大概如下:
网址: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哦!