zoukankan      html  css  js  c++  java
  • 写了一个css的样式

    描述:

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

    最外层有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 }
    程序宅男
  • 相关阅读:
    迪杰斯特拉(Dijkstra)算法描述及理解
    KMP初步
    网络流初步
    Cutting Codeforces Round #493 (Div. 2)
    优先队列小结
    树状数组初步理解
    分块思想
    树状数组-逆序对-HDU6318
    线段树
    8.12.5
  • 原文地址:https://www.cnblogs.com/dreamcenter/p/12527962.html
Copyright © 2011-2022 走看看