本人在懒人之家上看到的，虽然很简单，但有值得我们学习和注意的地方：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .lanren{
12 width: 663px;
13 border: solid #e5e5e5;
14 border-width: 1px 0 0 1px;
15 margin: 50px auto;
16 }
17 .lanren ul{
18 overflow: hidden;
19 list-style: none;
20 }
21 .lanren ul li{
22 float: left;
23 width: 200px;
24 height: 100px;
25 padding: 15px 10px 10px 10px;
26 border-right: 1px solid #ededed;
27 border-bottom: 1px solid #ededed;
28 cursor: pointer;
29 }
30 .lanren ul li img{
31 float: left;
32 margin-right: 10px; /*图片的margin值*/
33 }
34 .lanren ul li p{
35 text-align: left;
36 color: #666;
37 font-size: 12px;
38 margin-bottom: 5px;
39 line-height: 140%;
40 max-height: 32px;
41 overflow: hidden;
42 }
43 .lanren ul li b{
44 color: #e12228;
45 font-size: 16px;
46 font-weight: 700;
47 }
48 </style>
49 </head>
50 <body>
51
52 <div class="lanren">
53 <ul>
54 <li>
55 <img src="images/lanren01.jpg" alt=""/>
56 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
57 </li>
58 <li>
59 <img src="images/lanren02.jpg" alt=""/>
60 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
61 </li>
62 <li>
63 <img src="images/lanren03.jpg" alt=""/>
64 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
65 </li>
66 <li>
67 <img src="images/lanren04.jpg" alt=""/>
68 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
69 </li>
70 <li>
71 <img src="images/lanren05.jpg" alt=""/>
72 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
73 </li>
74 <li>
75 <img src="images/lanren06.jpg" alt=""/>
76 <p>艾美特 五片落地扇/电风扇</p><b>￥179.00</b>
77 </li>
78 </ul>
79 </div>
80
81
82 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
83 <script>
84 $(function (){
85 $(‘.lanren li‘).hover(function () {
86 $(this).find(‘img‘).stop().animate({
87 ‘margin-left‘:‘-10px‘,
88 ‘margin-right‘:‘20px‘ //margin-right加了10px，防止p元素移动
89 },500);
90 },function () {
91 $(this).find(‘img‘).stop().animate({
92 ‘margin-left‘:‘0px‘,
93 ‘margin-right‘:‘10px‘
94 },500);
95 });
96 });
97 </script>
98
99 </body>
100 </html>
时间： 2024-08-06 16:04:23