|
- <div class="lr-card">
- <div class="lr-card-content">
- <div class="lr-card-content-inner">
- 这是一个最简单的卡片视图组件,常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
- </div>
- </div>
- </div>
-
- <div class="lr-card">
- <div class="lr-card-header">页眉</div>
- <div class="lr-card-content">
- <div class="lr-card-content-inner">
- 包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
- </div>
- </div>
- <div class="lr-card-footer">页脚</div>
- </div>
- <div class="lr-card">
- <div class="lr-card-header lr-card-media" style="height:40vw;background-image:url(images/4.jpg)"></div>
- <div class="lr-card-content">
- <div class="lr-card-content-inner">
- <p>Posted on January 18, 2016</p>
- <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
- </div>
- </div>
- <div class="lr-card-footer">
- <a class="lr-card-link">Like</a>
- <a class="lr-card-link">Read more</a>
- </div>
- </div>
-
- <div class="lr-card">
- <div class="lr-card-header lr-card-media">
- <img src="images/logo.png">
- <div class="lr-card-media-body">
- 数字化智慧校园
- <p>发表于 2016-06-30 15:30</p>
- </div>
- </div>
- <div class="lr-card-content">
- <img src="images/1.jpg" alt="" width="100%">
- </div>
- <div class="lr-card-footer">
- <a class="lr-card-link">Like</a>
- <a class="lr-card-link">Comment</a>
- <a class="lr-card-link">Read more</a>
- </div>
- </div>
|
