一个好看的css小说作者封面排版

最近在制作网页的时候仿墨星封面网做了个美工封面作品展示卡片，觉得还不错，分享给大家

成品：

全局

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&amp;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&amp;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&amp;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&amp;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&amp;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>