Web App 开发----卡片视图

最新推荐文章于 2023-04-11 10:26:39 发布

烊烊！

最新推荐文章于 2023-04-11 10:26:39 发布

阅读量813

点赞数

文章标签： web app

本文链接：https://blog.csdn.net/m0_58760840/article/details/123761780

版权

cardview （卡片视图）概述：卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等。

使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成

<div class="mui-card">
	<!--页眉，放置标题-->
	<div class="mui-card-header">页眉</div>
	<!--内容区-->
	<div class="mui-card-content">内容区</div>
	<!--页脚，放置补充信息或支持的操作-->
	<div class="mui-card-footer">页脚</div>
</div>

操作如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<div class="mui-card">
			<!-- 页眉 -->
			<div class="mui-card-header mui-card-media">
				<img src="images/00.jpg" alt="头像" />
				<div class="mui-media-body">
					烊烊
					<p>发表于 2022-03-26 00：00</p>
				</div>
			</div>
			<!-- 内容 -->
			<div class="mui-card-content">
				<img src="images/00.jpg"  alt="图片" width="100%"/>
				<div class="mui-card-content-inner">
					<p style="color: #007AFF;"> 
					梦里能到达的地方，相信总有一天脚步也能到达！
                    初雪季节，适合念人
                    </p>
				</div>
			</div>
			<!-- 页脚 -->
			<div class="mui-card-footer">
				<a class="mui-card-link">点赞</a>
				<a class="mui-card-link">回复</a>
				<a class="mui-card-link">转发</a>
			</div>
		</div>
	</body>
</html>

代码效果如下：