layui-ul/demo/list.html

<fieldset class="layui-elem-field layui-field-title">
  <legend>头像列表</legend>
  <div class="layui-field-box">
    <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>


</fieldset>

<fieldset class="layui-elem-field layui-field-title">
  <legend>相册列表</legend>
  <div class="layui-field-box">
    <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>
</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>