页面灰度化演示

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量405 收藏 8
点赞数 7
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72852791/article/details/135219099
版权

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ登录</title>
    <style>
        #head{
            background-color:  skyblue;
            border-collapse: collapse;
        }
        #id,#password{
            height: 30px;
            width: 58%;
        }
        #header{
            width: 800px;
            border-collapse: collapse;
        }
        html{
          filter: grayscale();
       }
    </style>
</head>
<body>
    <form action="#" method="get">
        <table id="header">
            <tr id="head">
                <td style="width: 450px;">
                    <img src="./img/QQ登录.png" alt="QQ登录">
                    QQ登录
                </td>
                <td>
                    <table>
                        <tr>
                            <td><img src="./img/？.png"></td>
                            <td style="border-right: 1px;">QQ登录</td>
                            <td style="border-right: 1px;">授权管理</td>
                            <td>申请接入</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="border-right: 1px solid black;" >
                    <span>    </span>
                    <table style="width: 450px;text-align: center;height: 300px;">
                        <th>账号密码登录</th>
                        <tr>
                            <td>推荐使用<a href="#">快速安全登录</a>，防止盗号。</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" name="id" id="id" placeholder="支持QQ号/邮箱/手机号登录">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="password" name="password" id="password" placeholder="密码">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="image" src="./img/授权并登录.png" alt="授权并登录">
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table style="margin-left: 30px;">
                        <tr style="height: 50px;">
                            <td style="border-top: 1px solid black; " >
                                <a href="#">腾讯网</a> 将获得一下权限：
                            </td>
                        </tr>
                        <tr style="height: 50px;">
                            <td style="border-top: 1px solid black;">
                                <input type="checkbox" name="全选" id="全选" checked><label for="全选">全选</label>
                            </td>
                        </tr>
                        <tr style="height: 50px;">
                            <td style="border-top: 1px solid black;">
                                <input type="checkbox" name="子选项" id="子选项" checked><label for="子选项">获得您的昵称、头像、性别及会员信息</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                授权后表明你已同意<a href="#">QQ登录服务协议</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;border-right: 1px solid black;">
                    <table style="width: 400px;text-align: right;">
                        <tr>
                            <td style="border-right: 1px solid black;">忘记密码？</td>
                            <td style="border-right: 1px solid black;">注册新帐号</td>
                            <td>意见反馈</td>
                        </tr>
                    </table>
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</body>
</html>

 

Lai-x
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
数据中台POC演示流程
数通畅联
03-02 4936
数据中台POC是基于公司MDM、ESB和DAP三款核心产品搭建的集成环境，在对整个环境进行演示时需要从业务角度出发。本文针对整个环境演示的方式、流程和注意事项进行总结。
css-print:演示文章“ CSS印刷提示”
05-19
通过CSS，我们可以指定专为打印优化的颜色，例如使用灰度或者控制颜色的饱和度。 3. **页眉和页脚**：在打印版式中，页眉和页脚往往包含页码、日期等信息，有助于组织和导航文档。使用`@page`规则可以设置这些元素...
CODING DevOps + Nginx-ingress 实现自动化灰度发布
CODING 博客
07-23 875
作者：王炜，CODING DevOps 后端开发工程师，拥有多年研发经验，云原生、DevOps、Kubernetes 资深爱好者，Servicemesher 服务网格中文社区成员。获得 Kubernetes CKA、CKAD 认证。 前言 在 Kubernetes 上的应用实现灰度发布，最简单的方案是引入官方的 Nginx-ingress 来实现。 我们通过部署两套 deployment 和 services，分别代表灰度环境和生产环境，通过负载均衡算法，实现对两套环境的按照灰度比例进行分流，进而实.
Nginx+Lua+Redis 实现灰度上线系统
qq_57093716的博客
04-03 49
阅读 涨知识
灰度发布GrayRelease/Dark launch详解
zzhongcy的专栏
08-15 1万+
最近项目需求，研究了一下灰度发布，网上查了查，这里记录一下。 什么是灰度发布 灰度发布（又名金丝雀发布，英文一般称为GrayRelease或Dark launch）是为了能够让用户逐步过渡到新功能一种发布方式。一般是产品上线一个功能，希望在线上可以进行A/B testing，即让一部分用户继续用产品特性A，一部分用户开始用产品特性B，如果用户对B没有什么反对意见，那么逐步扩大范...
高仿QQ Xplan的H5页面
findhappy117的博客
02-13 873
这个h5的主要玩法很简单：地球自转的时候会播放背景音乐（比如海浪声），为了找到这个声音是从哪个地球上哪个地方传来的，需要长按下方的按钮，这时地球会自动转动到目标地点，然后镜头拉近，穿过云层，最后你会看到和这段声音相关的视频内容；松开手之后，上面的过程会倒退回去，地球又开始自转，播放着下段神秘的背景音乐。
iOS-组件化 —— 路由设计思路分析
MinggeQingchun的博客
08-03 683
iOS 组件化 —— 路由设计思路分析 一缕殇流化隐半边冰霜2017-03-01 10:48:3117066 原文 前言 随着用户的需求越来越多，对App的用户体验也变的要求越来越高。为了更好的应对各种需求，开发人员从软件工程的角度，将App架构由原来简单的MVC变成MVVM，VIPER等复杂架构。更换适合业务的架构，是为了后期能更好的维护项目。 但是用户依旧不满意，继续对开发人员提出了...
推荐30款最佳的数据可视化工具
热门推荐
Rxiang12的博客
12-20 1万+
推荐30款最佳的数据可视化工具 发表于2014-04-02 13:28| 64049次阅读| 来源CSDN| 0 条评论| 作者张红月 开源可视化工具iChartsFusionCharts XTModest MapsRaw 摘要：大量繁杂的数据在经过可视化工具处理后，就能以图形化的形式展现在用户面前，清晰直观。随着各种数据的增加，这种可视化工具越来越得到开
基于腾讯云微服务引擎（TSE） ，轻松实现云上全链路灰度发布
qq_36668144的博客
03-15 1327
使用腾讯云微服务引擎 TSE 提供的网关和服务治理能力，可以在不修改任何业务代码的情况下，可视化配置灰度规则，实现云上轻松易用的全链路灰度发布。
使用 KubeSphere 轻松实现微服务灰度发布与熔断
easylife206的专栏
08-22 3627
KubeSphere®️ 是在目前主流容器调度平台 Kubernetes 之上构建的企业级分布式多租户容器管理平台，提供简单易用的操作界面以及向导式操作方式，在降低用户使...
PPT表格的3D化处理.docx
09-27
在PPT设计中，3D化处理是一种提升视觉效果、增强演示文稿吸引力的重要手段。在PPT2021版本中，微软引入了更加便捷的3D图形功能，使得表格也能轻松实现3D效果。以下将详细讲解如何在PPT2021中为表格添加3D效果。 ...
python基于计算机视觉的图文识别系统cs源码数据库演示.zip
06-16
Python中的OpenCV库可能被用于这些任务，比如使用灰度化、直方图均衡化等方法改善图像质量，然后运用边缘检测或模板匹配找出关键元素，最后通过OCR（Optical Character Recognition）技术识别文字。 3. 图文识别：...
医疗信息化办公中级模拟试卷一0604.doc
10-10
本模拟试卷主要考察了医疗信息化办公的相关知识，涉及到操作系统、信息系统、临床信息系统、医院管理信息系统、计算机技术指标、医学信息标准化、图像处理、文字处理软件Word、电子病历、演示文稿软件PowerPoint以及...
python基于计算机视觉的答题卡识别及判分系统源码数据库演示.zip
06-16
在这个项目中，OpenCV可能被用来实现答题卡的图像预处理，比如灰度化、二值化、边缘检测等，以便于后续的图像分析和识别。 接着，Django是一个高级的Python Web框架，用于快速开发安全和可维护的网站。在这个答题卡...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 100
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
基于MATLAB的彩色图像灰度化处理.doc
11-29
"基于MATLAB的彩色图像灰度化处理文档深入探讨了在计算机视觉和图像处理领域的关键课题。彩色图像灰度化是将图像从丰富的色彩信息转化为单一灰度值的过程，这在许多应用场景中具有显著的优势，如人脸检测、运动物体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值