html卡片布局样式

已于 2022-12-06 14:33:10 修改
阅读量2.9w 收藏 63
点赞数 8
分类专栏： 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>
古柏树下
关注
专栏目录
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
前端练习＜Html&CSS＞——悬浮抽卡片（附完整代码及实现效果）
最新发布
Blusher1的博客
08-05 2854
这个小练习来源于b站up小K师兄，大家可以通过下面的链接学习哦~up讲的非常详细。先看一下效果：1.鼠标没有放置到card上2.鼠标放到card上，所有card呈角度散开3.单击选中某一张卡片，卡片上浮高亮，其他卡片变暗。
【样式】Html CSS卡片样式
我是Superman丶的博客
03-20 836
【样式】Html 卡片样式。
分享10个常见的CSS3页面布局
黑马程序员官方博客
05-22 3266
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；瀑布流也是一种很常见的布局，尤其是在图片信息流的产品，以往如果要完美的实现瀑布流，我们需要费不少的功夫，还要借助JS进行实现。两列布局，左边是导航栏目，右边是内容部分。尤其在后台的场景，是非常常用的。圣杯布局，不用我多说，想必每个前端人都做过这样的页面结构，如下图所示。如下图所示，卡片布局是我们常见的一种页面布局。
html5卡片效果
Amare丶的部落格
06-08 9864
html5卡片效果
HTML+CSS 动态卡片
正在创作系列：【若冰说CSS】
06-14 987
实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹，同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时，卡片的图片会放大，并且卡片的背景会变为彩色。
html并列卡片
weixin_35749545的博客
12-28 592
HTML 并列卡片是指在网页中使用 HTML 代码创建多个相互并列的卡片。这些卡片通常包含文本、图像和其他内容，可以用来展示信息、分类或导航。 要创建并列卡片，需要使用 HTML 的 div 元素和 CSS 样式。首先，使用 div 元素创建一个容器，然后为该容器指定 CSS 样式以调整大小和布局。接着，使用 div 元素创建多个卡片，并将它们放在容器中。最后，使用 CSS 样式调整卡片的外观和布...
HTML客户案例卡片布局样式
ICode联盟
08-28 807
下载地址HTML客户案例卡片布局样式，精美的css3鼠标悬停图文伸展展示布局特效，图文卡片还有好看的背景透明效果。 dd:
html 卡片布局 怎么,卡片式格局（CardLayout）
weixin_39566578的博客
06-10 1848
卡片式布局(CardLayout)Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，其xtype值为card。切换子面板的唯一途径是调用setActiveItem方法。var panel = new Ext.Panel({renderTo: "div3",frame: true,layout: "card",title: "卡片式布局(CardLayou...
html卡片布局样式,基于bootstrap卡片图文列表布局样式
weixin_42099936的博客
06-16 1428
特效描述：基于bootstrap 卡片图文列表 布局样式。bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。代码结构1. 引入CSS2. 引入JS3. HTML代码普通的卡片布局Card titleSome quick example text to build on the card title and make up the bulk ...
HTML5 Slide卡片风格的图片轮显特效.rar
07-10
像抽卡片效果的HTML5 Slide图片轮显特效，这个效果是在一个国外的HTML5网站模板中整理出来的，视觉效果大气，图片同时带有阴影效果，在切换的过程中，像抽出卡片的效果，前后叠放在一起，可用于HTML5设计的网页效果中，当然也可用于手机端使用，HTML5对于移动端设备还是有很好的兼容性的。 　　本效果整体外观样式如下图所示，鼠标单击后前后轮番显示切换。
HTML5图文卡片响应式布局特效
07-24
HTML5图文卡片响应式布局特效是一款常用的图文列表ui布局，带标题和内容介绍图文卡片响应式布局特效。
HTML5+原生javascript卡片展开特效demo
03-20
HTML5+原生javascript卡片展开特效demo,运用css3旋转效果，像扑克展开一样的卡片。
CSS3天气预报卡片布局代码.zip
07-03
【描述】CSS3天气预报卡片布局代码主要由两部分组成：HTML结构和CSS3样式，可能还包含了少量JavaScript来实现动态交互。HTML部分定义了卡片的基本结构，包括各个天气元素（如图标、温度、湿度等）的容器。CSS3则负责...
CSS3社交图文卡片式布局特效
06-24
在实际项目中，我们可以结合HTML结构和上述CSS3特性，创建出各种各样的社交图文卡片式布局。例如，`jiaoben8524`这个文件可能是包含示例代码、图片或其他资源的文件，用于演示如何实现这样的特效。在实践中，我们还...
html无规律卡片布局,如何实现同等间隙的卡片布局
weixin_36050894的博客
06-18 766
在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以(通过精确计算后确实也可以)直接设置...
卡片样式 html源码,这个彩色卡片样式，可以自定义颜色！
weixin_30663839的博客
06-15 1449
原标题：这个彩色卡片样式，可以自定义颜色！大家好，我是老沙。新的一周又来送教程啦。每周老沙都会送上与排版、运营有关的各种干货，并及时更新到i排版公众号的菜单栏里。所以，哪天你错过了某篇干货文章，或者想再看几遍，按照如图所示的位置便能找到。 上周老沙曾教大家制作 文字彩色背景(戳蓝字可直接查看)，教程中涉及到代码，有些小伙伴被样式吸引，转眼又被代码劝退。其实，大可不必。老沙的教程凡是涉及到代码的，基...
html5 实现卡片布局,HTML5实现的矢量卡片式组织结构图
weixin_39915427的博客
07-05 526
组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时，不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构，今天就给大家带来一款用TWaver实现的组织结构图，提供多种布局方式，为了清晰呈现组织里每个人的职能，我们定制了名片样式来展示网元。首先来看下整体效果。先来一个经典的上下层级布局：再来一个圆形布局：这些布局用twaver来实...
html卡片式布局并从后端获取数据
05-24
下面是一个简单的 HTML 卡片布局示例： ```html <h3>Card Title <p>Card description goes here. ``` 可以使用 CSS 样式来控制卡片的布局和样式： ```css .card { display: flex; flex-direction: ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

古柏树下

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

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

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

打赏作者

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

抵扣说明：

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

余额充值