1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 /*让图片把包含图片和文字的div占满，让文字div溢出隐藏*/
8 #mm{
9 width:1270px; /*调节宽度让他居中*/
10 overflow:hidden; /*他的子div把这个div撑开*/
11 margin:0 auto;
12 }
13 .pro img{
14 width:100%; /*让这个图片的宽高占他父div的宽高和父div的宽高一样*/
15 height:100%;
16 display:block;/*让这个图片成为盒子模型成为一个div*/
17 }
18 .pro{
19 border:1px dashed #B8B4B4;
20 width:300px;/*设置大div的宽高*/
21 height:150px;
22 padding:2px;/*让图片和他的父div中间有空隙*/
23 overflow:hidden;/*隐藏溢出的文字div*/
24 float:left;/*让这个div左对齐*/
25 margin:5px;/*让这个div四周都有5px空隙*/
26 }
27 div.pro div{
28 position:relative;/*相对定位div移走后还占有原来的位置*/
29 width:300px;/*设置文字div的宽度和高度宽度要和pro父div的一样宽*/
30 height:50px;
31
32 -webkit-transition:all 0.2s ease-in 0;/*动画效果*/
33 background-image:linear-gradient(rgba(0,0,0,0.06),#000);/*背景渐变效果*/
34 bottom:-2px;/* 让隐藏的文字div下移动让文字div距离他的父div的底部有2px的缝隙因为图片都有2px的间隙，为了让他从图片底部出现，所以要写尽量比图片的间隔稍微大一点点*/
35 }
36 div.pro:hover div{
37 bottom:50px;/*鼠标滑过让文字div距离父div底部向上有50px的缝隙*/
38 }
39 </style>
40 </head>
41 <body>
42 <div id="mm">
43 <div class="pro">
44 <img src="images/img2.jpg">
45 <div>产品中心下载</div>
46 </div>
47 <div class="pro">
48 <img src="images/img2.jpg">
49 <div>产品中心下载</div>
50 </div>
51 <div class="pro">
52 <img src="images/img2.jpg">
53 <div>产品中心下载</div>
54 </div>
55 <div class="pro">
56 <img src="images/img2.jpg">
57 <div>产品中心下载</div>
58 </div>
59 <div class="pro">
60 <img src="images/img2.jpg">
61 <div>产品中心下载</div>
62 </div>
63 <div class="pro">
64 <img src="images/img2.jpg">
65 <div>产品中心下载</div>
66 </div>
67
68 <div class="pro">
69 <img src="images/img2.jpg">
70 <div>产品中心下载</div>
71 </div>
72 <div class="pro">
73 <img src="images/img2.jpg">
74 <div>产品中心下载</div>
75 </div>
76 <div class="pro">
77 <img src="images/img2.jpg">
78 <div>产品中心下载</div>
79 </div>
80 <div class="pro">
81 <img src="images/img2.jpg">
82 <div>产品中心下载</div>
83 </div>
84 <div class="pro">
85 <img src="images/img2.jpg">
86 <div>产品中心下载</div>
87 </div>
88 <div class="pro">
89 <img src="images/img2.jpg">
90 <div>产品中心下载</div>
91 </div>
92 <div class="pro">
93 <img src="images/img2.jpg">
94 <div>产品中心下载</div>
95 </div>
96 <div class="pro">
97 <img src="images/img2.jpg">
98 <div>产品中心下载</div>
99 </div>
100 <div class="pro">
101 <img src="images/img2.jpg">
102 <div>产品中心下载</div>
103 </div>
104
105
106 </div>
107
108 </body>
109 </html>
时间： 2024-08-02 02:51:41