图文列表

默认效果

<ul class="ui-media-list">
<li class="ui-media">
<div class="ui-media-img ui-mr-20">
<svg width="150" height="120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">150*120</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header ui-text-hide"><a href="">我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘</a></div>
<div class="ui-media-text">我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。</div>
<div class="ui-media-other"><i class="ui-icon-time-circle"></i> 2019-05-01</div>
</div>
</li>
<li class="ui-media">
<div class="ui-media-img ui-mr-20">
<svg width="150" height="120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">150*120</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header ui-text-hide"><a href="">我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘</a></div>
<div class="ui-media-text">我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。</div>
<div class="ui-media-other"><i class="ui-icon-time-circle"></i> 2019-05-01</div>
</div>
</li>
</ul>

右侧加底线

  • Placeholder80*80
    IT平民
    在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?
  • Placeholder80*80
    IT平民
    我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。
<ul class="ui-media-list">
<li class="ui-media">
<div class="ui-media-img ui-mr-20">
<svg width="150" height="120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">150*120</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header ui-text-hide"><a href="">我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘</a></div>
<div class="ui-media-text">我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。</div>
<div class="ui-media-other"><i class="ui-icon-time-circle"></i> 2019-05-01</div>
</div>
</li>
<li class="ui-media">
<div class="ui-media-img ui-mr-20">
<svg width="150" height="120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">150*120</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header"><a href="">我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘</a></div>
<div class="ui-media-text">我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。</div>
<div class="ui-media-other"><i class="ui-icon-time-circle"></i> 2019-05-01</div>
</div>
</li>
</ul>

无底线

  • Placeholder80*80
    IT平民
    在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?
  • Placeholder80*80
    IT平民
    我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。
  • Placeholder80*80
    IT平民
    “我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘。”你说:“谁说风过无痕?如果真的是风过无痕,那么,为何你这缕轻风却吹凉了我的脸,也冷却了我的心
<ul class="ui-media-list ui-media-border-none">
<li class="ui-media">
<div class="ui-media-img ui-mr-20 ui-radius">
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">80*80</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header">IT平民</div>
<div class="ui-media-text">在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?回首曾经相伴走过的江堤,已是白雾弥漫,今日,只闻孤鸿的哀啼声在那绵绵不绝。在苍茫云水间,谁的一声声丝竹萦耳,将我的忧伤打落,惹一地微蓝?</div>
</div>
<div class="ui-media-arrow ui-media-center"></div>
</li>
<li class="ui-media">
<div class="ui-media-img ui-mr-20 ui-radius">
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">80*80</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header">IT平民</div>
<div class="ui-media-text">我知道,从此,我的世界将有一种心酸的美丽,那就是,孤单中苦守着回忆,当你隔空的深深一吻落下的时候,我有意选择了躲闪,因为我不能让这吻落在不能落的地方。</div>
</div>
<div class="ui-media-link ui-media-center"><a href="" class="ui-btn ui-btn-green">查看</a></div>
</li>
<li class="ui-media">
<div class="ui-media-img ui-mr-20 ui-radius">
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">80*80</text></svg>
</div>
<div class="ui-media-body">
<div class="ui-media-header">IT平民</div>
<div class="ui-media-text">“我是轻轻飘过你心空的一缕风,你栽的红豆,此生,我已无期可摘。”你说:“谁说风过无痕?如果真的是风过无痕,那么,为何你这缕轻风却吹凉了我的脸,也冷却了我的心</div>
</div>
<div class="ui-media-link ui-media-center"><a href="" class="ui-btn ui-btn-green">查看</a></div>
</li>
</ul>