layui-ul/demo/pc/list.html

<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>