描述：

写了这个：图片+文字+日期的样式

最外层有box-shadow,然后hover时会向上动一动~

差不多就这样的功能

 

 

 

源码：

 1 /*
 2     设计格式盒子规范：
 3     <div class="m-channel">
 4         <div><img src=""></div>
 5         <p>名字</p>
 6         <p>更新时间</p>
 7     </div>
 8     其中名字最多八个字
 9 */
10 
11 .m-channel{
12     width: 150px;height: 190px;
13     margin: 10px;
14     margin-top: 20px;
15     text-align: center;
16     box-shadow: 0 0 10px rgba(0,0,0,0.2);
17     display: inline-block;
18 }
19 .m-channel:hover{
20     position: relative;top: -5px;
21 }
22 .m-channel div{
23     width: 95%;height: 143px;
24     margin: 10px auto;
25     margin-top: 3px;
26     margin-bottom: 5px;
27     
28 }
29 .m-channel div img{
30     width: 100%;
31     display: inline;
32 }
33 .m-channel p:last-child{
34     color: darkgray;
35     font-size: 12px;
36     text-align: left;
37     margin-left: 10px;
38 }