最近在制作网页的时候仿墨星封面网做了个美工封面作品展示卡片,觉得还不错,分享给大家
成品:
全局
css:
<div id="portal_block_237_content" class="dxb_bc"><style>
.iusercard {
width: 285px;
height: 200px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.iusercard:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.iuserpart {
width: 285px;
height: 60px;
}
.iuseravatar {
width: 60px;
height: auto;
float: left;
margin-top: 20px;
margin-left: 6px;
}
.iuseravatar img {
border-radius: 30px;
}
.iusername {
float: left;
margin-left: 10px;
margin-top: 18px;
}
.iusername p {
line-height: 25px;
}
.iusername a {
text-decoration: none;
color: #333333;
}
.iworkpart {
margin-top: 30px;
}
.ifmshow {
float: left;
box-shadow: 0 0 5px 0 #888888;
margin-left: 10px;
margin-top: 4px;
width: 56px;
height:75px;
}
.ifmshow:hover {
margin-top: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.ifmshow img{
width: 56px;
height:75px;
}
.ilazyload {
background: #fff url(https://www.icoolhua.com/template/bygsjw_2/image/lanjiazai.gif) no-repeat center center;
}
</style>
html:
<div class="iusercard">
<div class="iuserpart">
<div class="iuseravatar">
<img class="iavatar lazy" src="uc_server/avatar.php?uid=1" style="width:100%" alt="美工头像">
</div>
<div class="iusername">
<p><a href="home.php?mod=space&uid=1" target="_blank"><b>酷画美工(icoolhua)</b></a></p>
<p class="userdescription" style="font-size: 14px;">酷画神级美工</p>
</div>
</div>
<div class="iworkpart">
<dl class="fmshow"><dt>
<div class="ifmshow">
<a href="forum.php?mod=viewthread&tid=29" target="_blank">
<img class="ilazyload" alt="申请免费小说封面" src="data/attachment/forum/202310/04/170238nsmmac22e8mc9sc3.jpg" style="display: block;">
<span></span>
</a>
</div>
</dt><dt>
<div class="ifmshow">
<a href="forum.php?mod=viewthread&tid=30" target="_blank">
<img class="ilazyload" alt="申请免费小说封面" src="data/attachment/forum/202310/04/175028idocrtoczvpwxcrc.jpg" style="display: block;">
<span></span>
</a>
</div>
</dt><dt>
<div class="ifmshow">
<a href="forum.php?mod=viewthread&tid=28" target="_blank">
<img class="ilazyload" alt="仙魔九劫申请免费小说封面" src="data/attachment/forum/202310/03/192024fg2yybn7622tyxpa.jpg" style="display: block;">
<span></span>
</a>
</div>
</dt><dt>
<div class="ifmshow">
<a href="forum.php?mod=viewthread&tid=27" target="_blank">
<img class="ilazyload" alt="申请小说封面制作《窥命》" src="data/attachment/forum/202310/03/192421zrzf4kwryw4ywy8f.jpg" style="display: block;">
<span></span>
</a>
</div>
</dt></dl>
</div>
</div>