好人卡/新ACG同款首页四格宣传引导页HTML/CSS

直接看图效果吧。

代码如下：

<div id="html-box-top1" class="html-box"><style>
    .top-4-list li{
        background-color: #fff;
        width: 20%;
        float: left;
        padding: 5px;
        text-align: center;
        box-shadow: 0 0 0 1px #ebebed;
        box-sizing: border-box; 
    }
    .top-4-list span{
        display:block;
        margin-top: 0.25rem;
        font-size: 14px;
    }
    .top-4-list i{
        margin-right: 5px;
    }
    .top-4-list li:hover{
        background-color: #2d80ed;
        color:#fff;
    }
    @media screen and (max-width: 768px){
        .top-4-list li{
            width: 50%;
            font-size: 14px;
            line-height: 1.5;
        }
        .top-4-list span{
            display: inline;
            margin-top: 0;
        }
        .li-2{
            width: 33%!important;
        }
        .li-3{
            width: 34%!important;
        }
        .li-2 i{
        margin-right: 3px; 
        }
    }
    @media screen and (max-width: 330px){
        .top-4-list i{
            display:none;
        }
    }

</style>
<div class="top-4">
    <ul class="top-4-list b2-radius">
        <a href="https://www.0imc.com/" target="_blank"><li>?<span>刀鱼资源</span></li></a>
        <a href="/elm" target="_blank"><li><i class="haorenka hrka-eleme"></i>?<span>外卖红包每天领</span></li></a>
        <a href="/meituziyuan" target="_blank"><li class="li-2">?<span>美图资源</span></li></a>
        <a href="/47.html" target="_blank"><li class="li-2">?<span>资源解压</span></li></a>
        <a href="/vips" target="_blank"><li class="li-3">?<span>开通会员</span></li></a>
    </ul>
</div></div>