标签：width 样式 text top 一个 css 10px margin channel

描述：

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

最外层有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 }

标签：width,样式,text,top,一个,css,10px,margin,channel
来源： https://www.cnblogs.com/dreamcenter/p/12527962.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。