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

Wordpress 3个月前 acg
458 次浏览 0

直接看图效果吧。

好人卡/新ACG同款首页四格宣传引导页HTML/CSS 好人卡/新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 class="external" rel="nofollow" target="_blank" href="http://www.acgpk.com/go/?url=aHR0cHM6Ly93d3cuMGltYy5jb20v" 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>
版权声明:acg 发表于 2021-05-04 21:28:43。
转载请注明:好人卡/新ACG同款首页四格宣传引导页HTML/CSS | ACGPK精选导航网

暂无评论

暂无评论...