layui-ul/demo/pc/list.html

<fieldset class="layui-elem-field layui-field-title">
    <legend>头像列表</legend>
    <div class="layui-field-box">
        <div class="demo-js-src" style="display: block;">
            <div class="ul-avatar-list">
                <div class="ul-avatar-list-item">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
                <div class="ul-avatar-list-item">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
            </div>
            <div class="ul-avatar-list" style="width: 400px;">
                <div class="ul-avatar-list-item">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
                <div class="ul-avatar-list-item">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
            </div>
            <div class="ul-avatar-list" style="width: 200px;">
                <div class="ul-avatar-list-item current">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
                <div class="ul-avatar-list-item">
                    <div class="ul-avatar-list-item-img"></div>
                    <div class="ul-avatar-list-item-info">
                        <div class="ul-avatar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-list-item-tips">
                            深山旅馆电话事件的最新消息
                        </div>
                        <div class="ul-avatar-list-item-time">
                            19:54
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>侧边头像列表</legend>
    <div class="layui-field-box ">
        <div class="demo-js-src" style="display: block;">
            <div class="ul-avatar-sidebar-list" style="width: 200px;">
                <div class="ul-avatar-sidebar-list-item" data-repeat="3">
                    <div class="ul-avatar-sidebar-list-item-img"></div>
                    <div class="ul-avatar-sidebar-list-item-info">
                        <div class="ul-avatar-sidebar-list-item-title">
                            张三
                        </div>
                        <div class="ul-avatar-sidebar-list-item-intro">
                            法外狂徒不寂寞
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>相册列表</legend>
    <div class="layui-field-box">
        <div class="demo-js-src" style="display: block;">
            <div class="ul-photo-list">
                <div class="ul-photo-item" data-repeat="3">
                    <div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">

                    </div>
                    <div class="ul-photo-info">
                        <div class="ul-photo-title">周末野外广场树林写真</div>
                        <div class="ul-photo-plus">45P+1V</div>
                        <div class="ul-photo-desc">相册说明内容</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>卡片式相册列表</legend>
    <div class="layui-field-box">
        <div class="ul-photo-card-list">

            <div class="ul-photo-card-item" data-repeat="7">
                <div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">

                </div>
                <div class="ul-photo-card-info">
                    <div class="ul-photo-card-title">周末野外广场树林写真</div>
                    <div class="ul-photo-card-desc">相册说明内容</div>
                    <div class="ul-photo-card-plus">45P+1V</div>
                </div>
            </div>

        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>内容丰富的留言列表</legend>
    <div class="layui-field-box layui-bg-gray">
        <div class="ul-message-list ul-padding-md">
            <div class="ul-message-item ul-bg-white" data-repeat="3">
                <div class="ul-message-item-left">
                    <div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">

                    </div>
                </div>
                <div class="ul-message-item-right">
                    <div class="ul-message-item-info">
                        <div class="ul-message-item-name">
                            <div class="data-item">
                                奥古斯宏
                            </div>
                            <div class="data-item">
                                程序员
                            </div>
                        </div>
                        <div class="ul-message-item-data">
                            <div class="data-item split-border">
                                <span class="data-title">联系方式:</span>
                                <span class="data-value">13012341234</span>
                            </div>
                            <div class="data-item">
                                <span class="data-title">价位:</span>
                                <span class="data-value">￥3</span>
                            </div>

                        </div>
                        <div class="ul-message-item-options">
                            <div class="layui-btn">查看详情</div>
                        </div>
                    </div>
                    <div class="ul-message-item-content">
                        百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
                    </div>
                    <div class="ul-message-item-img-list">
                        <div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>


<fieldset class="layui-elem-field layui-field-title">
    <legend>笔记列表</legend>
    <div class="layui-field-box">
        <div class="ul-padding-md">
            <div class="ul-note-list">
                <div class="ul-note-item current">
                    <div class="ul-note-item-icon">
                        <i class="layui-icon layui-icon-read"></i>
                    </div>
                    <div class="ul-note-item-info">
                        <div class="ul-note-item-title">未命名的笔记</div>
                        <div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
                        <div class="ul-note-item-time">2021-04-11</div>
                        <div class="ul-note-item-tree">
                            ddd
                        </div>

                    </div>
                </div>
                <div class="ul-note-item">
                    <div class="ul-note-item-icon">
                        <i class="layui-icon layui-icon-read"></i>
                    </div>
                    <div class="ul-note-item-info">
                        <div class="ul-note-item-title">未命名的笔记</div>
                        <div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
                        <div class="ul-note-item-time">2021-04-11</div>
                        <div class="ul-note-item-tree">
                            ddd
                        </div>

                    </div>
                </div>


            </div>
        </div>

    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>条幅(广告)列表</legend>
    <div class="layui-field-box">
        <div class="ul-ad-list">
            <div class="ul-ad-item" data-repeat="3">
                <div class="ul-ad-left">
                    <div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
                </div>
                <div class="ul-ad-right">
                    <div class="ul-ad-title">福牛迎春</div>
                    <div class="ul-ad-desc">天天送大礼</div>
                    <div class="ul-ad-options">
                        <div class="layui-btn">查看详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>


<fieldset class="layui-elem-field layui-field-title">
    <legend>课程列表</legend>
    <div class="layui-field-box ">
        <div class="ul-bg-gray ul-padding-md">
            <div class="ul-course-list">
                <a class="ul-course-item" data-repeat="10">
                    <div class="ul-course-item-poster-container">
                        <div class="layui-btn layui-btn-xs ul-course-item-tag">
                            免费
                        </div>
                        <div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
                        </div>
                    </div>
                    <div class="ul-course-item-info">
                        <div class="ul-course-item-title">
                            PHP8最新特性介绍和演示
                        </div>
                        <div class="ul-course-item-options">
                            <div class="ul-course-item-option-item ul-color-main">
                                免费
                            </div>
                            <div class="ul-course-item-option-item">
                                初级
                            </div>
                            <div class="ul-course-item-option-item">
                                3节课
                            </div>
                            <div class="ul-course-item-option-item">
                                1人报名
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>课程侧边列表</legend>
    <div class="layui-field-box ">
        <div class="ul-bg-gray ul-padding-md" style="width: 300px;">
            <div class="ul-course-sidebar-list">
                <a class="ul-course-sidebar-item" data-repeat="4">
                    <div class="ul-course-sidebar-item-poster-container">
                        <div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">

                        </div>
                    </div>
                    <div class="ul-course-sidebar-item-info">
                        <div class="ul-course-sidebar-item-title">
                            PHP8最新特性介绍和演示
                        </div>
                        <div class="ul-course-sidebar-item-options">
                            <div class="ul-course-sidebar-item-option-item ul-color-main">
                                免费
                            </div>
                            <div class="ul-course-sidebar-item-option-item">
                                初级
                            </div>
                            <div class="ul-course-sidebar-item-option-item">
                                3节课
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>图书列表</legend>
    <div class="layui-field-box">
        <div class="layui-word-aux">一般大小</div>
        <div class="ul-padding-md">
            <div class="ul-book-list">
                <div class="ul-book-item" data-repeat="6">
                    <div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">

                    </div>
                    <div class="ul-book-info">
                        <div class="ul-book-title">三体</div>
                        <div class="ul-book-author">刘慈欣</div>
                        <div class="ul-book-status">阅读次数333</div>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-word-aux">加大</div>
        <div class="ul-padding-md">
            <div class="ul-book-list big">
                <div class="ul-book-item" data-repeat="6">
                    <div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">

                    </div>
                    <div class="ul-book-info">
                        <div class="ul-book-title">三体</div>
                        <div class="ul-book-author">刘慈欣</div>
                        <div class="ul-book-status"><span>阅读</span><span>3333</span></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>

<fieldset class="layui-elem-field layui-field-title">
    <legend>站点导航</legend>
    <div class="layui-field-box">
        <div class="ul-site-group" data-repeat="2">
            <div class="ul-site-group-header">
                新上线
            </div>
            <div class="ul-site-list">

                <div class="ul-site-item" data-repeat="5">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">

                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全
                        </div>
                    </div>
                </div>
                <div class="ul-site-item">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">

                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
                        </div>

                    </div>
                </div>


            </div>


        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>站点导航（卡片）</legend>
    <div class="layui-field-box">
        <div class="ul-site-group ul-bg-gray ul-padding-md" data-repeat="2">
            <div class="ul-site-group-header">
                新上线
            </div>
            <div class="ul-site-list">

                <div class="ul-site-item card" data-repeat="5">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全
                        </div>
                    </div>
                </div>
                <div class="ul-site-item card">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
    <legend>站点导航（卡片修复高度）</legend>
    <div class="layui-field-box">
        <div class="ul-site-group ul-bg-gray ul-padding-md" data-repeat="2">
            <div class="ul-site-group-header">
                新上线
            </div>
            <div class="ul-site-list">

                <div class="ul-site-item card same-height" data-repeat="5">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全
                        </div>
                    </div>
                </div>
                <div class="ul-site-item card same-height">
                    <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
                    </div>
                    <div class="ul-site-item-info">
                        <div class="ul-site-item-title">
                            layui奥宏样式库
                        </div>
                        <div class="ul-site-item-desc">
                            纯CSS的组件案例样式大全纯CSS的组件案例样式大全纯CSS的组件案例样式大全
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>