我正在一个网站上工作,我在网站上显示一些管理员用户以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>
用于显示我的资源。
答案 0 :(得分:2)
试试此代码
.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;