html卡片布局样式

已于 2022-12-06 14:33:10 修改
阅读量3w 收藏 63
点赞数 9
分类专栏： CSS 文章标签： HTML css 卡片样式
于 2018-07-30 13:52:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_29774479/article/details/81283806
版权

效果图如下

这里写图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>卡片效果</title>
		<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			.cardBox {
				width: 200px;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				text-align: center;
				float: left;
				margin-right: 10px;
				padding: 5px;
				padding-top: 15px;
			}
			
			.headerBox {
				color: #fff;
				padding: 10px;
				font-size: 15px;
				height: 60px;
			}
			
			.bodyBox {
				padding: 10px;
			}
			
			.bodyBox p {
				margin-left: 5px;
			}
		</style>
	</head>

	<body>
		<div>
			<div class="cardBox">
				<div class="headerBox" style="background-color: #4caf50;">
					<p>
						<a title="查看详情" style="cursor: pointer; color:white" onclick="viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a>
					</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：成柯</p>
					<p>项目主管：王江</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">启动</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：1,817,375</p>
				</div>
			</div>

			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称二</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>

			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称三</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>

			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称四</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>

			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称四</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>
			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称四</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>
			<div class="cardBox">
				<div class="headerBox" style="background-color: #5BC0DE;">
					<p>项目名称五</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：朱焕宏</p>
					<p>项目主管：朱焕宏</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-info" style="border-radius: .25em;">初始化</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：0</p>
				</div>
			</div>
		</div>
		<div>
			<div class="cardBox">
				<div class="headerBox" style="background-color: #4caf50;">
					<p>
						<a title="查看详情" style="cursor: pointer; color:white" onclick="viewXmInfo('${var.OMP_XM_ID}');">项目名称一</a>
					</p>
				</div>
				<div class="bodyBox">
					<p>项目经理：成柯</p>
					<p>项目主管：王江</p>
					<p>项目状态：
						<a href="javascript:void(0)" class="label label-success" style="border-radius: .25em;">启动</a>
					</p>
					<p>异常状态：<span style="color:green">无异常</span></p>
					<p>加工量：1,817,375</p>
				</div>
			</div>
		</div>

	</body>

</html>
HTML+CSS 文本动画卡片
正在创作系列：【若冰说CSS】
06-02 524
实现了一个图片叠加文本动画效果的卡片（Card）布局。当鼠标悬停在卡片上时，卡片上的图片会变为半透明，同时显示隐藏在图片上的文本内容，并且文本内容有一个从左到右的渐显动画效果，伴随着一个白色渐变背景的动画效果。
CSS3社交图文卡片式布局特效
06-24
CSS3社交图文卡片式布局特效是一款可用于相册图片，产品图片介绍展示特效。
html5+css3响应式购物商城商品列表布局特效.zip
09-25
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
HTML&CSS：必学！用骨架屏卡片布局，让信息页“高级感爆棚”
最新发布
weixin_52814911的博客
03-17 742
这段代码实现了一个简洁的卡片式布局，适用于展示电影信息或其他内容。通过骨架屏效果模拟加载状态，增强了页面的交互性和用户体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
html5卡片效果
Amare丶的部落格
06-08 9966
html5卡片效果
【样式】Html CSS卡片样式
我是Superman丶的博客
03-20 1452
【样式】Html 卡片样式。
HTML+CSS 动态卡片
正在创作系列：【若冰说CSS】
06-14 1285
实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹，同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时，卡片的图片会放大，并且卡片的背景会变为彩色。
html并列卡片
weixin_35749545的博客
12-28 696
HTML 并列卡片是指在网页中使用 HTML 代码创建多个相互并列的卡片。这些卡片通常包含文本、图像和其他内容，可以用来展示信息、分类或导航。 要创建并列卡片，需要使用 HTML 的 div 元素和 CSS 样式。首先，使用 div 元素创建一个容器，然后为该容器指定 CSS 样式以调整大小和布局。接着，使用 div 元素创建多个卡片，并将它们放在容器中。最后，使用 CSS 样式调整卡片的外观和布...
HTML客户案例卡片布局样式
ICode联盟
08-28 857
下载地址HTML客户案例卡片布局样式，精美的css3鼠标悬停图文伸展展示布局特效，图文卡片还有好看的背景透明效果。 dd:
html 卡片布局 怎么,卡片式格局（CardLayout）
weixin_39566578的博客
06-10 1929
卡片式布局(CardLayout)Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。var panel = new Ext.Panel({renderTo: "div3",frame: true,layout: "card",title: "卡片式布局(CardLayou...
HTML5图文卡片响应式布局特效
07-24
HTML5图文卡片响应式布局特效是一款常用的图文列表ui布局，带标题和内容介绍图文卡片响应式布局特效。
HTML5 Slide卡片风格的图片轮显特效.rar
07-10
像抽卡片效果的HTML5 Slide图片轮显特效，这个效果是在一个国外的HTML5网站模板中整理出来的，视觉效果大气，图片同时带有阴影效果，在切换的过程中，像抽出卡片的效果，前后叠放在一起，可用于HTML5设计的网页效果中，当然也可用于手机端使用，HTML5对于移动端设备还是有很好的兼容性的。 　　本效果整体外观样式如下图所示，鼠标单击后前后轮番显示切换。
HTML5+原生javascript卡片展开特效demo
03-20
HTML5+原生javascript卡片展开特效demo,运用css3旋转效果，像扑克展开一样的卡片。
CSS3天气预报卡片布局代码.zip
07-03
【描述】CSS3天气预报卡片布局代码主要由两部分组成：HTML结构和CSS3样式，可能还包含了少量JavaScript来实现动态交互。HTML部分定义了卡片的基本结构，包括各个天气元素（如图标、温度、湿度等）的容器。CSS3则负责...
html+css轮滑式卡片
09-14
轮滑式卡片的实现通常涉及到CSS的布局技巧，如Flexbox或Grid，以及动画效果。我们可以设置卡片的宽度、高度、边距等属性，确保它们在页面上整齐排列。为了实现轮滑功能，我们可能还需要使用CSS的`transition`和`...
html无规律卡片布局,如何实现同等间隙的卡片布局
weixin_36050894的博客
06-18 863
在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以(通过精确计算后确实也可以)直接设置...
卡片样式 html源码,这个彩色卡片样式，可以自定义颜色！
weixin_30663839的博客
06-15 1565
原标题：这个彩色卡片样式，可以自定义颜色！大家好，我是老沙。新的一周又来送教程啦。每周老沙都会送上与排版、运营有关的各种干货，并及时更新到i排版公众号的菜单栏里。所以，哪天你错过了某篇干货文章，或者想再看几遍，按照如图所示的位置便能找到。 上周老沙曾教大家制作 文字彩色背景(戳蓝字可直接查看)，教程中涉及到代码，有些小伙伴被样式吸引，转眼又被代码劝退。其实，大可不必。老沙的教程凡是涉及到代码的，基...
html5 实现卡片布局,HTML5实现的矢量卡片式组织结构图
weixin_39915427的博客
07-05 584
组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时，不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构，今天就给大家带来一款用TWaver实现的组织结构图，提供多种布局方式，为了清晰呈现组织里每个人的职能，我们定制了名片样式来展示网元。首先来看下整体效果。先来一个经典的上下层级布局：再来一个圆形布局：这些布局用twaver来实...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

古柏树下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值