html卡片布局样式
2024-04-24 05:27:50
效果图如下
代码如下
<!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卡片布局样式相关推荐
- 卡片布局样式弹出页面html页面前端源码[20226]
大家好,今天给大家介绍一款,卡片布局样式弹出页面html页面前端源码(图1).送给大家哦,获取方式在本文末a尾. 图1 点击卡片会弹出相应子页面,四种卡片弹出四种不同的页面布局(图2) 图2 源码完整 ...
- HTML客户案例卡片布局样式
下载地址HTML客户案例卡片布局样式,精美的css3鼠标悬停图文伸展展示布局特效,图文卡片还有好看的背景透明效果. dd:
- html卡片布局样式,基于bootstrap卡片图文列表布局样式
特效描述:基于bootstrap 卡片图文列表 布局样式.bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码. 代码结构 1. 引入CSS 2. ...
- 用RecyclerView来实现苹果后台样式的卡片布局
说到苹果的卡片布局我就想起当年我的挚爱--web OS系统了.在功能机转换到智能机的时代,Web oS系统是那样的出类拨萃,傲压群雄,只可惜现在流落到只能在电视上才能看到他的身影了.记得我的第一台智能 ...
- html卡片布局按钮,Material Design风格动态网格卡片布局UI设计
这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果.在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果. 使用方 ...
- java卡片布局 切换卡片释放_Java卡片布局管理器解释及实例
由 CardLayout 类实现的布局管理器称为卡片布局管理器,用来操纵其所管理容器中包含的容器或组件.每个直接添加到其所管理容器中的容器或组件为一个卡片,最先被添加的容器或组件被认为是第一个卡片,最 ...
- java怎么设置卡片布局_在Java中使用卡片布局管理器的方法
在Java中使用卡片布局管理器的方法 发布时间:2020-12-03 16:05:18 来源:亿速云 阅读:85 作者:Leah 在Java中使用卡片布局管理器的方法?针对这个问题,这篇文章详细介绍了 ...
- HarmonyOS实战—卡片的样式设计
目录 HarmonyOS实战 HarmonyOS卡片样式设计 卡片的布局文件 自定义2*4的卡片布局 HarmonyOS实战 HarmonyOS卡片样式设计 从鸿蒙手机的左下角屏幕向上滑动,就能打开我 ...
- 【RecyclerView】 九、为 RecyclerView 设置不同的布局样式
文章目录 一.为 RecyclerView 设置不同的布局样式 二.完整代码 三.RecyclerView 相关资料 一.为 RecyclerView 设置不同的布局样式 为 RecyclerView ...
最新文章
- 分布式系统的Raft算法
- 博客搭建攻略（一）：平台选择
- 【自动化__持续集成】___java___重载
- oracle解除表锁死1,解除Oracle被锁的表
- Python报错UnicodeEncodeError: ‘ascii‘ codec can‘t encode characters in position 1413-1418: ordinal not
- 0128互联网新闻 | 微信小游戏新增“文化互动”类目；钉钉将上线企业拜年红包...
- android 监听手机开机
- Oracle bigfile 大文件表空间会影响rman等备份效率
- Centos7 error: Failed to initialize NSS library
- 【英语学习】【Level 07】U04 Rest and Relaxation L3 The finest hotel
- 软件工程学习总结（2）——大部分的软件工程其实就是管道作业
- 医学AI又一突破，微软开源生物医学NLP基准：BLURB
- java是否安装outlook,Java程序定期检查ms Outlook是否有新邮件
- 免费的微信编辑器插件调用
- 程序人生 - 座位险和驾乘险有什么区别，买了后者还需要前者吗？
- Communications link failure错误（亲测有效）
- 信息安全数学基础(仅供个人复习使用)
- P14 Optimistic Concurrency Control 课程观看笔记
- Picasso之图片缓存机制二ListView篇
- 利用随机森林预测股票大盘涨跌