html5卡片效果

最新推荐文章于 2024-08-31 15:11:22 发布
最新推荐文章于 2024-08-31 15:11:22 发布
阅读量5 收藏
点赞数
分类专栏： web 文章标签： php
原文链接：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" οnclick="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" οnclick="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>

MZZ骏马_279644337
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3小实例：3D旋转卡片
小王的技术库
05-29 1078
HTML5+CSS3实现3D旋转卡片，开发工具：VS Code。 先看效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c53c2c237c74057a4190617668f404a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 源代码： <div clas
html桌面卡牌效果,HTML5+CSS3从入门到精通之实现卡片效果
weixin_39571938的博客
06-03 873
本篇文章探讨了HTML5+CSS3从入门到精通之实现卡片效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。<一、文字卡片效果1 2 3 meta4 文字卡片效果5 6 div.card {7 width: 250px;8 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);9 tex...
html5实现卡片效果
热门推荐
小时
08-09 1万+
卡片效果              .card{width: 250px;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;}         .header{             background-color: #4caf50;
html 翻转卡片效果,CSS3 3D transforms系列教程-卡片翻转
weixin_30882521的博客
06-03 968
通过前两篇关于CSS3 3D transforms文章的学习，现在我们都已经掌握了制作3D对象的必要知识，下面让我们从一个简单的例子开始下面的教程-3D卡片翻转。下面是制作3D卡片翻转效果必要的HTML代码结构：12section.container将用于制作3D空间。#card作为3D对象的包装器，它里面两个单独的元素是卡片的正反两面。虽然是一个是否简单的结构，但是我们强烈建议在使用3D tra...
HTML5 Slide卡片风格的图片轮显特效.rar
07-10
像抽卡片效果的HTML5 Slide图片轮显特效，这个效果是在一个国外的HTML5网站模板中整理出来的，视觉效果大气，图片同时带有阴影效果，在切换的过程中，像抽出卡片的效果，前后叠放在一起，可用于HTML5设计的网页效果...
html5天气预报卡片设计效果特效代码
03-20
在这款“HTML5天气预报卡片设计效果特效代码”中，开发者利用了HTML5的一些核心特性来创建了一个直观且吸引人的用户界面，特别适合用于网站或应用的天气插件。 首先，SVG（Scalable Vector Graphics）是HTML5中的一...
HTML5食谱卡片滑动切换特效
06-24
"HTML5食谱卡片滑动切换特效"是利用HTML5的特性，结合CSS3和JavaScript技术实现的一种创新的用户界面设计。这种特效使用户可以通过鼠标拖动或者在触屏设备上滑动手指来浏览一系列卡片式的食谱，每张卡片都展示了一道...
html5手机端点击卡片动画弹出框特效
11-03
HTML5作为最新的超文本标记语言标准，提供了丰富的API和元素，使得在移动设备上创建动态效果和交互变得更加容易。下面将详细探讨实现这种特效的关键技术和步骤。 1. **CSS3动画**：在HTML5中，CSS3是实现动画效果的...
一道关于php文件包含的CTF题
m0_62903168的博客
08-27 2665
这是index.php的页面。点击login后会发现url里多了action的参数，那么我们就可以通过它来获取源码。?再通过base64的解码可以查看源码。
使用 树莓派3B+ 对日本葡萄园进行经济实惠的环境监测
EDATEC的博客
08-29 1237
然而，他也热衷于酿造 “优质葡萄酒”，随着他所居住的东京北部胜沼地区葡萄酒旅游业的兴起，他感觉到了商机。菊岛热衷于在他所谓的 “Hinno ”物联网系统中使用太阳能，日语中的 “Hinno ”表明这是一种简单的农民葡萄栽培方法，因为太阳能还可以用来为电栅栏供电，防止动物靠近作物。他还可以在办公室里随时观察大气状况。对于 菊岛邦夫—Vineyard Kikushima 而言，Raspberry Pi 生态系统提供了支持和信息，通过基于温度和湿度监测的有针对性的最低限度杀虫剂方案，来提高葡萄的健康产量。
Nginx的lnmp服务搭建
2201_75745826的博客
08-29 1128
nginx是一款功能强大的web服务器。和apache一样，有http和https两个服务。nginx功能强大，且库使用第三方模块，正反向代理等。Nginx默认采用多进程工作方式，Nginx启动后，会运行一个master进程和多个worker进程。其中master充当整个进程组与用户的交互接口，同时对进程进行监护，管理worker进程来实现重启服务、平滑升级、更换日志文件、配置文件实时生效等功能。worker用来处理基本的网络事件，worker之间是平等的，他们共同竞争来处理来自客户端的请求。
Upload-Lab第20关：如何利用文件名可控漏洞？
didiplus
08-27 484
在Upload-Lab的第20关中，系统没有对上传文件的内容进行验证，而是仅对用户输入的文件名进行了检查。具体来说，系统使用文件后缀名的黑名单进行过滤，但由于上传的文件名是用户可控的，这为绕过机制提供了可能性。此外，函数还有一个特性，即它会忽略文件名末尾的/.，这可以被利用来绕过后缀名的黑名单检查，从而上传恶意文件。通过这一关的学习，我们可以深入理解 Apache 配置文件的作用及其在安全防护中的重要性。同时，这也提醒我们在设计和开发上传功能时，必须考虑到所有可能的攻击面，确保服务器配置的安全性和稳健性。
RTX5源码全家桶集成emWin6.40, Modbus主从，含FreeRTOS版, 探讨一种移植第3方组件通用方法以及使用注意事项2024-08-30
最新发布
Simon223的博客
08-31 235
RTX5源码全家桶集成emWin6.40, Modbus主从，含FreeRTOS版, 探讨一种移植第3方组件的通用方法以及多任务使用注意事项。2、RTX5/FreeRTOS全家桶首期视频，框架设计。3、CMSSIS-RTOS V2封装层教程。6、emWin和全家桶中间件的兼容问题。
第三章 封装与继承
weixin_65279640的博客
08-28 1275
面向对象三大特征之一 ——封装概念：将类的某些信息隐藏在类内部，不允许外部程序直接访问，而是通过该类提供的方法来实现对隐藏信息的操作和访问把尽可能多的东西藏起来，对外提供便捷的接口。说白了就是把对象中的属性信息封装在对象类内部，不让用户直接使用类属性进行访问，而是定义一个方法作为类属性的接口提供给用户访问使用。封装的两个大致原则把所有的属性藏起来把尽可能多的东西藏起来，对外提供便捷的接口。
使用 Puppeteer 在 PHP 中解决 reCAPTCHA 以进行网页抓取
weixin_68994939的博客
08-28 1140
为了让您了解一些背景信息，reCAPTCHA 是一种旨在保护网站免遭自动化滥用的系统。它要求用户完成对人类来说很容易但对机器人来说很困难的任务，例如识别图像中的物体或选中一个框。虽然这些挑战对于安全来说非常有用，但它们对于网页抓取来说却很麻烦。：此版本以“我不是机器人”复选框和基于图像的挑战而闻名。用户可能需要点击图像或完成特定操作来证明他们不是机器人。它在区分真实用户和机器人方面非常有效。：此版本在后台运行。它不直接要求用户交互，而是分析用户在整个网站上的行为，并分配一个风险评分。
xss-labs通关攻略 11-15关
2301_82061181的博客
08-27 442
步骤二：修改User Agent：click me!" type="button" onmouseover="alert(/xss/)进行放包。步骤二：修改Cookie: user=click me!" type="button" onmouseover="alert(/xss/)" type="button" onmouseover="alert(/xss/)进行放包。name='步骤一：利用burp抓包。步骤一：利用burp抓包。
SP: eric
Aukum的博客
08-27 492
Vulnhub——SP: eric靶机，利用git信息泄露漏洞，使用githack工具获得用户名和密码，成功登录admin.php找到文件上传点最终上传反弹shell脚本实现getshell。
TP6开发文档概述
l4120228的博客
08-27 596
TP6（ThinkPHP 6）是一个使用PHP语言开发的快速、兼容且简单的面向对象开发框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值