<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
<style type="text/css">
/*第一：设置头部背景图片*/
/*.mui-card-header{
background-image: url(image/2.jpg);
height: 40vw;
width: 100%;
/*能让图片完全显示出来*/
/*background-size: contain;*/
/*}*/
.mui-card-content img{
height: 40vw;
width: 100%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">卡片视图</h1>
</header>
<div class="mui-content">
<!--卡片布局如下
<div class="mui-card">
<div class="mui-card-header">卡片头部</div>
<div class="mui-card-content">主体内容</div>
<div class="mui-card-footer">卡片底部</div>
</div>
-->
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<!--
主体内容部分：
媒体卡片自作：mui-card-media
右边文字叙述部分：mui-media-body
-->
<!--<div class="mui-card-media">-->
<img src="img/logo.png"/>
<div class="mui-media-body">
蓝天白云
<p>晴空万里</p>
<p>2019-2-22 星期五</p>
<!--</div>-->
</div>
</div>
<div class="mui-card-content">
<!--
mui-card-content-inner:能够有一个缩进的效果
-->
<div class="mui-card-content-inner">
<img src="image/2.jpg"/>
<p class="mui-card-content-inner">
4、不要过份依赖友谊，或者花很多心思去猜度身边的人对你是否真心，
一个人生活不会死，
体会孤单是成长必修课，谁都要经历。人生路漫长，
如果有一段实在是没人陪你热闹同行，
你要对踽踽独行的自己说，
走过这段就好，前方有更好的风景和更好的人等着。
</p>
</div>
</div>
<div class="mui-card-footer">
<!--
设置
-->
<a href="" class="mui-card-link">
<span class="mui-content-padded mui-icon mui-icon-extra mui-icon-extra-heart-filled">
</span>收藏</a>
<a href="" class="mui-card-link">
<spand class="mui-content-padded mui-icon mui-icon-eye"></spand>
查看</a>
<a href="" class="mui-card-link">
<spand class="mui-content-padded mui-icon mui-icon-chat"></spand>回复</a>
<!--<a href="" class="mui-card-link">评论</a>-->
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
效果如下：
