15. 登录页案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>登录页案例</title><style>body {margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;background: linear-gradient(to right, #ffd194, #70e1f5);}.login-container {background-color: rgba(255, 255, 255, 0.5);border-radius: 8px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);width: 400px;padding: 40px;block-size: border-box;text-align: center;}.login-container:hover {background-color: rgba(255, 255, 255, 0.9);}.login-container h1 {color: #333;margin-bottom: 30px;font-size: 24px;transition: color 0.3s ease;}.login-container:hover h1 {color: #555;}.login-input-container {position: relative;margin-bottom: 20px;}.login-input {width: calc(100% - 30px);padding: 15px;border: none;border-bottom: 2px solid #3498db;border-radius: 4px;box-sizing: border-box;font-size: 16px;color: #333;background-color: transparent;transition: border-color 0.3s ease;}.login-input:focus,.login-input:valid {border-color: red;outline: none;}.input-label {position: absolute;left: 15px;top: 18px;color: #999;font-size: 16px;pointer-events: none;transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;}.login-input:focus ~ .input-label,.login-input:valid ~ .input-label {top: -5px;font-size: 12px;color: #2980b9;}.login-button {width: 200px;background-color: #3498db;color: #fff;padding: 10px 15px;border: none;border-radius: 20px;cursor: pointer;font-size: 18px;transition: background-color 0.3s ease;}.login-button:hover {background-color: #2980b9;}</style></head><body><div class="login-container"><h1>账号密码登录</h1><form action="#" method="post"><div class="login-input-container"><input class="login-input" type="text" name="username" required /><label class="input-label">username</label></div><div class="login-input-container"><input class="login-input" type="password" name="password" required /><label class="input-label">password</label></div><button class="login-button" type="submit">Login</button></form></div></body><script></script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/812630.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++11的更新介绍（新的类功能、可变参数模板）

C++11的更新介绍（新的类功能、可变参数模板）

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;c大冒险 总有光环在陨落&#xff0c;总有新星在闪烁 新的类功能 默认成员函数&…
阅读更多...
《师兄啊师兄》：玄机科技打造国漫新高峰，IP运营再显神力

《师兄啊师兄》：玄机科技打造国漫新高峰，IP运营再显神力

在这个国漫蓬勃发展的时代&#xff0c;玄机科技再次以其超凡的制作水准和出色的IP运营能力&#xff0c;为我们带来了一部国漫新经典——《师兄啊师兄》。这部作品不仅在画面、剧情上达到了行业新高度&#xff0c;更在IP运营上展现出了其强大的实力与前瞻性。 《师兄啊师兄》的画…
阅读更多...
构建智能连接的未来：物联网平台系统架构解析

构建智能连接的未来：物联网平台系统架构解析

随着科技的不断进步和互联网的普及&#xff0c;物联网&#xff08;Internet of Things, IoT&#xff09;已成为连接世界的新方式。物联网平台作为实现物联网应用的核心基础设施&#xff0c;其系统架构的设计和实施至关重要。本文将深入探讨物联网平台系统架构的关键要素和最佳实…
阅读更多...
题目：利用ellipse and rectangle 画图。

题目：利用ellipse and rectangle 画图。

题目&#xff1a;利用ellipse and rectangle 画图。 There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated …
阅读更多...
ARM CoreLink 系列的互连产品包括哪些？

ARM CoreLink 系列的互连产品包括哪些？

ARM CoreLink 系列的互连产品包括多种不同的技术&#xff0c;旨在为系统级芯片&#xff08;SoC&#xff09;提供高性能、高效率和高可靠性的互连解决方案。以下是一些主要的 CoreLink 互连产品&#xff1a; CoreLink CCN (Cache Coherent Network) 系列 CoreLink CCN-504: 这是…
阅读更多...
【七 （2）FineBI-平台新增用户留存分析】

【七 （2）FineBI-平台新增用户留存分析】

目录 文章导航一、字段解释1、用户平台登录信息表格2、用户平台激活信息表格 二、需求三、操作步骤1、建立用户平台登录信息表格和用户平台激活信息表格的关联关系2、将用户平台激活信息表格的激活日期添加到用户平台登录信息表格3、新增公式列&#xff0c;计算激活时间和登录时…
阅读更多...
链表中倒数最后k个结点【c语言】

链表中倒数最后k个结点【c语言】

#include <stdio.h> #include <stdlib.h>typedef struct Node {int data;struct Node* next; } Node, *LinkedList;// 创建一个新节点 Node* createNode(int data) {Node* newNode (Node*)malloc(sizeof(Node));if (newNode NULL) {printf("Error! Unable t…
阅读更多...
P4119 [Ynoi2018] 未来日记

P4119 [Ynoi2018] 未来日记

它来了&#xff01; 分析一下第一个操作&#xff0c;不是写过嘛&#xff0c;并查集 分析一下第二个操作&#xff0c;二分套二分答案 拿下了这题 仔细分析&#xff0c;貌似时间复杂度是错的 我们考虑块套块 时间复杂度 对1e5的值域进行分块 求k值我们可以先找是第几个块&…
阅读更多...
word并排比较

word并排比较

Word并排比较是一种在Microsoft Word文档中同时显示两个文本内容并进行比较的功能。这种比较通常用于查看文档的不同版本之间的差异&#xff0c;或者比较两个不同来源的文本内容。 在Word中进行并排比较通常可以通过以下步骤实现&#xff1a; 通过这种方式&#xff0c;Word的并…
阅读更多...
灯光1-灯光与阴影的关系

灯光1-灯光与阴影的关系

灯光与阴影之间存在密切的关系。在计算机图形学和视觉效果中&#xff0c;灯光是用来模拟现实世界中的光照情况的一种技术。通过设置不同的灯光属性和位置&#xff0c;可以产生各种不同的光照效果&#xff0c;其中之一就是阴影。 当一个物体被照亮时&#xff0c;光线会被物体表…
阅读更多...
2024阿里云学生服务器申请图文全流程，学生机免费续费攻略

2024阿里云学生服务器申请图文全流程，学生机免费续费攻略

2024年阿里云学生服务器免费申请&#xff0c;完成学生认证可以领取1个月免费学生机&#xff0c;完成任务可以再免费学费6个月时长&#xff0c;还可以领取高校计划学生300元无门槛优惠代金券&#xff0c;阿里云服务器网aliyunfuwuqi.com整理2024年最新阿里云大学生服务器申请入口…
阅读更多...
国内代理IP对网络安全的影响及其应对策略

国内代理IP对网络安全的影响及其应对策略

国内代理IP对网络安全的影响主要体现在以下几个方面&#xff1a; 1. 隐私保护&#xff1a; - 使用国内代理IP可以隐藏用户的真实IP地址&#xff0c;增加网络匿名性。这有助于防止第三方追踪用户的在线活动&#xff0c;减少个人信息泄露的风险&#xff0c;特别是对于敏感操作或访…
阅读更多...
8路HDMI+8路AV高清视频流媒体编码器JR-3218HD

8路HDMI+8路AV高清视频流媒体编码器JR-3218HD

产品简介&#xff1a; JR-3218HD高清音视频编码产品支持8路高清HDMI音视频采集功能&#xff0c;8路AV视频采集功能&#xff0c;8路3.5MM独独立音频接口采集功能。编码输出双码流H.264格式&#xff0c;音频MP3/AAC格式。编码码率可调&#xff0c;画面质量可控制。支持HTTP/RTSP…
阅读更多...
企业在申请火力发电资质中的人才队伍建设瓶颈

企业在申请火力发电资质中的人才队伍建设瓶颈

企业在申请火力发电资质的过程中&#xff0c;人才队伍建设常常面临一系列瓶颈问题。这些问题不仅影响企业的资质申请进度&#xff0c;还可能制约企业的长远发展。以下是一些主要的人才队伍建设瓶颈&#xff1a; 首先&#xff0c;专业技术人才短缺是一个突出问题。火力发电行业…
阅读更多...
SpringBoot中的yaml 与properties文件书写格式

SpringBoot中的yaml 与properties文件书写格式

本文参考https://c.biancheng.net/spring_boot/example.html SpringBoot starter Spring Boot 将日常企业应用研发中的各种场景都抽取出来&#xff0c;做成一个个的 starter&#xff08;启动器&#xff09;&#xff0c;starter 中整合了该场景下各种可能用到的依赖&#xff…
阅读更多...
引人共鸣的情感视频素材在哪找？今天看这五个网站

引人共鸣的情感视频素材在哪找？今天看这五个网站

朋友们好啊&#xff0c;最近是不是不少人都在发愁啊&#xff0c;优秀创作者做视频用的视频素材哪来的啊&#xff1f;今天我为朋友们准备了几个优秀的视频素材网站&#xff0c;让你们做视频不再缺少素材&#xff0c;然后还有几个辅助创作的工具&#xff0c;都是你们需要的&#…
阅读更多...
算法与数据结构 顺序栈（C++）

算法与数据结构 顺序栈（C++）

随机产生10个100以内的整数建立一个顺序栈&#xff0c;从栈顶到栈底依次显示栈内元素&#xff1b;从键盘输入出栈元素个数 n (1< n <10)&#xff0c;将 n 个元素依次出栈并显示出栈元素&#xff0c;再显示此时栈顶元素。 #include <iostream> #include <cstd…
阅读更多...
电源——BUCK详解

电源——BUCK详解

目录 BUCK电路工作原理3种工作模式 BUCK电路实操PCB如何降低EMI和EMC及注意事项 BUCK电路工作原理 如图&#xff0c;给一个一定频率的PWM波控制Q1&#xff0c;使得输入电压不停的导通断开&#xff0c;达到降压的目的。 输入电压 * 占空比 输出电压 非隔离 输入与输出的极性相同…
阅读更多...
mysql 大表凌晨定时删除数据

mysql 大表凌晨定时删除数据

有几张表数据量非常大&#xff0c;一次维护量有点大&#xff08;一个月有500多万条数据&#xff0c;并且还在往上涨&#xff09;&#xff0c; 于是想了个定时删除数据&#xff0c;每天凌晨执行&#xff0c;这样每天删除数据量就小&#xff0c; 循环删除&#xff0c;每次删除5…
阅读更多...
CSS导读 （复合选择器 上）

CSS导读 （复合选择器 上）

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 二、CSS的复合选择器 2.1 什么是复合选择器 2.2 后代选择器(重要) 2.3 子选择器(重要) Questions 小提…
阅读更多...
最新文章

Copyright @ 2022~2023