Question

我正在一个网站上工作，我在网站上显示一些管理员用户以Google Play商店视图的形式上传的资源。

看起来如下：

我需要创建此资源的CSS视图，然后为所有资源重新填充相同的视图。

这是我到目前为止实施的内容：

a.img-list { list-style-type：none; 保证金：0; 填充：0; text-align：center; }

    ul.img-list li {
        display: inline-block;
        height: 150px;
        margin: 0 1em 1em 0;
        position: relative;
        width: 150px;
    }

    .imgWrap:hover .imgDescription {
        visibility: visible;
        opacity: 1;
    }

    span.text-content span {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

    span.text-content {
        background: rgba(0,0,0,0.5);
        color: white;
        cursor: pointer;
        display: table;
        height: 150px;
        left: 0;
        position: absolute;
        top: 0;
        width: 150px;
        opacity: 0;
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        transition: opacity 500ms;
    }

    ul.img-list li:hover span.text-content {
        opacity: 1;
    }
</style>

用于显示我的资源。

Answer 1

试试此代码

＆＃13;

.box{width: 180px;background: #fff;box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);margin: 10px;font-family: Arial,sans-serif;}
.box img{width: 100%;}
.box .content{padding: 10px;}
.box p{margin: 7px 0;}
.box .title{color: #333;font-size: 18px;}
.box .price{color: #ed3b3b;float:right;}
.box .author{font-size: 16px;}
.box .desc{font-style: italic;font-size: 14px;color: #616161;}

＆＃13;

<div class="box">
  <img src="https://lh3.googleusercontent.com/apDLpFcXDG-Pal2n8_xhWoKm21OrDT0ib2d-R4rMQVLC6VtojnkYcfibE-JKlZoVisIh=w170-rw">
  <div class="content">
    <p class="title">
    The time machine
    </p>
    <p>
      <span class="author">H.G Wells</span>
      <span class="price">$226.80</span>
    </p>
    <p class="desc">
  Popular with time machine readers
    </p>
  </div>
  
</div>

＆＃13;

在这里演示https://jsfiddle.net/tsebautr/

如何让Google Play商店以HTML格式查看？

1 个答案: