非常漂亮的列表展示效果

2个月前 / 0 评论 / 1582 阅读 / 正在检测是否收录...

https://style.su1018.cn/7NLnO920220310160706.png
没什么灵感,其实也就是从其他地方拔下来自用,不过已经剔除了无用的代码,在次记录一下自用

html代码

<div class="uk-child-width-1-5@m uk-child-width-1-3@s uk-child-width-1-2 uk-grid-small uk-grid" uk-grid="">
    <div class="uk-first-column">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-1.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">苏拉娜品牌</a></h3>
                <span>  教育</span>
                <p>5个人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-6.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">  显示商店</a></h3>
                <span>市场</span>
                <p>14 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-7.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">苏拉娜品牌</a></h3>
                <span>  教育</span>
                <p>5个人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>                       
    <div class="uk-grid-margin uk-first-column">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-lg-2.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">天空会计</a></h3>
                <span>  商业</span>
                <p>13 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>                        
    <div class="uk-grid-margin">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-lg-2.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">天空会计</a></h3>
                <span>  商业</span>
                <p>13 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-grid-margin">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-lg-5.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">  阶段设计师</a></h3>
                <span>  购物</span>
                <p>15 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-grid-margin uk-first-column">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-lg-3.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">  显示商店</a></h3>
                <span>市场</span>
                <p>14 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-grid-margin">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-1.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">  阶段设计师</a></h3>
                <span>  购物</span>
                <p>15 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-grid-margin">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-6.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">  显示商店</a></h3>
                <span>市场</span>
                <p>14 人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-grid-margin uk-first-column">
        <div class="sl_page_list boosted_pages">
            <a href="group-feed.html">
                <div class="sl_page_list_media">
                    <img src="https://www.17sucai.com/preview/1424582/2020-09-17/simplest/assets/images/avatars/avatar-lg-4.jpg" alt="图片">
                </div>
            </a>
            <div class="sl_page_list_info">
                <h3> <a href="group-feed.html">苏拉娜品牌</a></h3>
                <span>  教育</span>
                <p>5个人喜欢这个</p>
                <div class="sl_page_list_info_btns">
                    <span>
                    <button type="button" class="button primary small block">
                        <span>喜欢</span>
                    </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码

您当前等级为游客

尊享价格:30元登陆后购买
付费可见

1 HTML会员卡片样式

HTML会员卡片样式

CSS样式 会员内容 # 会员卡片 # 会员样式
26天前 0 179 0
1 非常漂亮的列表展示效果

非常漂亮的列表展示效果

CSS样式 付费内容 30
2个月前 0 1583 0
input(file)按钮样式美化

input(file)按钮样式美化

2020-04-17 11:21:17 0 7526 21
1 响应式Html时间轴特效

响应式Html时间轴特效

CSS样式 会员内容
2个月前 0 2881 22

评论

取消