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>
古柏树下
关注
  • 8
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
用html+css设计一个列表清单小卡片
weixin_56334307的博客
07-05 819
这个HTML代码片段是一个简单的列表清单设计。它包含一个卡片元素（class为"card"），内部包含一个无序列表（ul），列表项（li）前面有一个特殊的符号（△）。整个卡片元素设计成300px宽，150px高，具有圆角边框和阴影效果。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。希望这个设计能对大家的学习有所帮助！
html卡片布局样式,基于bootstrap卡片图文列表布局样式
weixin_42099936的博客
06-16 1413
特效描述：基于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 ...
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
码农研究僧的博客
02-10 3164
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
html+css卡片
12-18
网页制作中，静态页面书写代码时方便查看的代码卡片
html5卡片效果
Amare丶的部落格
06-08 9854
html5卡片效果
【样式】Html 卡片样式
我是Superman丶的博客
03-20 784
【样式】Html 卡片样式。
html并列卡片
weixin_35749545的博客
12-28 576
HTML 并列卡片是指在网页中使用 HTML 代码创建多个相互并列的卡片。这些卡片通常包含文本、图像和其他内容，可以用来展示信息、分类或导航。 要创建并列卡片，需要使用 HTML 的 div 元素和 CSS 样式。首先，使用 div 元素创建一个容器，然后为该容器指定 CSS 样式以调整大小和布局。接着，使用 div 元素创建多个卡片，并将它们放在容器中。最后，使用 CSS 样式调整卡片的外观和布...
HTML+CSS 动态卡片
最新发布
正在创作系列：【若冰说CSS】
06-14 930
实现了一个带有动态背景和图片放大效果的卡片展示。卡片的背景是由两种颜色交替组成的斜线条纹，同时背景会以一定速度循环滚动。当鼠标悬停在卡片上时，卡片的图片会放大，并且卡片的背景会变为彩色。
HTML5图文卡片响应式布局特效
07-24
实现这样的响应式图文卡片布局，开发者可能使用了CSS3的媒体查询（Media Queries）来检测设备的屏幕尺寸，并据此定义不同断点下的样式规则。这样，无论用户是在桌面、平板还是手机上浏览，都能看到适应屏幕的布局。...
html无规律卡片布局,如何实现同等间隙的卡片布局
weixin_36050894的博客
06-18 757
在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以(通过精确计算后确实也可以)直接设置...
CSS3天气预报卡片布局代码.zip
07-03
【描述】CSS3天气预报卡片布局代码主要由两部分组成：HTML结构和CSS3样式，可能还包含了少量JavaScript来实现动态交互。HTML部分定义了卡片的基本结构，包括各个天气元素（如图标、温度、湿度等）的容器。CSS3则负责...
html+css轮滑式卡片
09-14
html+css轮滑式卡片
HTML5 Slide卡片风格的图片轮显特效.rar
07-10
像抽卡片效果的HTML5 Slide图片轮显特效，这个效果是在一个国外的HTML5网站模板中整理出来的，视觉效果大气，图片同时带有阴影效果，在切换的过程中，像抽出卡片的效果，前后叠放在一起，可用于HTML5设计的网页效果中，当然也可用于手机端使用，HTML5对于移动端设备还是有很好的兼容性的。 　　本效果整体外观样式如下图所示，鼠标单击后前后轮番显示切换。
HTML5+原生javascript卡片展开特效demo
03-20
HTML5+原生javascript卡片展开特效demo,运用css3旋转效果，像扑克展开一样的卡片。
CSS3社交图文卡片式布局特效
06-24
在实际项目中，我们可以结合HTML结构和上述CSS3特性，创建出各种各样的社交图文卡片式布局。例如，`jiaoben8524`这个文件可能是包含示例代码、图片或其他资源的文件，用于演示如何实现这样的特效。在实践中，我们还...
卡片样式 html源码,这个彩色卡片样式，可以自定义颜色！
weixin_30663839的博客
06-15 1437
原标题：这个彩色卡片样式，可以自定义颜色！大家好，我是老沙。新的一周又来送教程啦。每周老沙都会送上与排版、运营有关的各种干货，并及时更新到i排版公众号的菜单栏里。所以，哪天你错过了某篇干货文章，或者想再看几遍，按照如图所示的位置便能找到。 上周老沙曾教大家制作 文字彩色背景(戳蓝字可直接查看)，教程中涉及到代码，有些小伙伴被样式吸引，转眼又被代码劝退。其实，大可不必。老沙的教程凡是涉及到代码的，基...
HTML+CSS前端简单卡片动态效果
hexuhui0920的博客
01-16 2513
HTML+CSS前端简单卡片动态效果
实现美图官网活动卡片——html、css
u013430418的博客
07-13 529
通过使用HTML+CSS实现美图官网的卡片样式
HTML客户案例卡片布局样式
ICode联盟
08-28 801
下载地址HTML客户案例卡片布局样式，精美的css3鼠标悬停图文伸展展示布局特效，图文卡片还有好看的背景透明效果。 dd:
html卡片式布局并从后端获取数据
05-24
卡片式布局可以使用 HTML 和 CSS 实现，而从后端获取数据则需要使用后端语言如 PHP、Python 等，以及数据库如 MySQL、MongoDB 等。 下面是一个简单的 HTML 卡片布局示例： ```html <div class="card"> <img src="image.jpg" alt="Card Image"> <div class="card-content"> <h3>Card Title</h3> <p>Card description goes here.</p> </div> </div> ``` 可以使用 CSS 样式来控制卡片的布局和样式： ```css .card { display: flex; flex-direction: column; width: 300px; border: 1px solid #ccc; border-radius: 5px; margin: 10px; } .card img { width: 100%; border-radius: 5px 5px 0 0; } .card-content { padding: 10px; } .card-content h3 { margin: 0; } .card-content p { margin: 10px 0; } ``` 要从后端获取数据并显示在卡片上，可以使用后端语言和数据库，例如 PHP 和 MySQL。以下是一个简单的 PHP 示例： ```php <?php // 连接 MySQL 数据库 $conn = mysqli_connect("localhost", "username", "password", "database"); // 查询卡片数据 $result = mysqli_query($conn, "SELECT * FROM cards"); // 输出卡片 HTML 和数据 while ($row = mysqli_fetch_assoc($result)) { echo '<div class="card">'; echo '<img src="' . $row['image'] . '" alt="Card Image">'; echo '<div class="card-content">'; echo '<h3>' . $row['title'] . '</h3>'; echo '<p>' . $row['description'] . '</p>'; echo '</div>'; echo '</div>'; } // 关闭数据库连接 mysqli_close($conn); ?> ``` 这段 PHP 代码会查询一个名为 `cards` 的 MySQL 表，然后输出每行数据对应的卡片 HTML。你可以根据自己的需求修改代码。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

古柏树下

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

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

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

打赏作者

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

抵扣说明：

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

余额充值