ionic 卡片(二)
【摘要】 卡片展现以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素,并使用了 item-avatar , item-body 元素用于展示图片和文本信息,底部使用 item-divider 类。<div class="list card"> <div class="item item-avatar"> <img src="mcfly.jpg"> <h2>...
卡片展现
以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素,并使用了 item-avatar , item-body 元素用于展示图片和文本信息,底部使用 item-divider 类。
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
评论
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</div>
</div>
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)