二次元的登录界面
今天还是继续坚持写博客，然后今天给大家带来比较具有二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！
个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，掌握更多知识！虽然都说前端已死，但是就算不靠这个吃饭，学一点东西总比啥也不知道的
HTML部分
既然是制作登录界面我们可以使用表单元素，会比盒子更加简单一些，个人相信大家应该可以明白里头的啥意思吧！！！
这边就介绍一下CSS部分吧
<div class="shell"><div id="img-box"><img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""></div><form action="" method="post"><div id="form-body"><div id="welcome-lines"><div id="w-line-1">HI,xiaochao</div><div id="w-line-2">Welcome Back</div></div><div id="input-area"><div class="f-inp"><input type="text" placeholder="Email Address"></div><div class="f-inp"><input type="password" placeholder="Password"></div></div><div id="submit-button-cvr"><button type="submit" id="submit-button">LOGIN</button></div><div id="forgot-pass"><a href="#">Forgot password?</a></div></div></form></div>CSS部分
还是给我们先清除内外边距
然后这个ountline：none；的意思是鼠标点击文本框的时候，文本的边框焦点会被去除掉
还是设置一个背景颜色，这里我们使用的是渐变色：然后在需要让盒子来正中间，需要使用弹性布局
感觉下面都挺简单的，我就着重讲一下这个伪元素吧placeholder
placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的placeholder属性。
* {padding: 0;margin: 0;outline: none;}body {background: linear-gradient(45deg, #fbda61, #ff5acd);display: flex;justify-content: center;align-items: center;height: 100vh;}.shell,form {position: relative;}.shell {display: flex;justify-content: center;}form {width: 562px;height: 520px;background-color: #fff;box-shadow: 0px 15px 40px #b6354e;border-radius: 15px;display: flex;justify-content: center;align-items: center;}#img-box {width: 330px;height: 520px;}#img-box img {height: 100%;margin-left: -175px;border-radius: 20px;}#form-body {width: 320px;display: flex;justify-content: center;align-items: center;flex-direction: column;}#welcome-lines {width: 100%;text-align: center;line-height: 1;}#w-line-1 {color: #7f7f7f;font-size: 50px;}#w-line-2 {color: #9c9c9c;font-size: 30px;margin-top: 17px;}#input-area {width: 100%;margin-top: 40px;}.f-inp {padding: 13px 25px;border: 2px solid #6e6d6d;line-height: 1;border-radius: 20px;margin-bottom: 15px;}.f-inp input {width: 100%;font-size: 14px;padding: 0;margin: 0;border: 0;}.f-inp input::placeholder {color: #b9b9b9;}#submit-button-cvr {margin-top: 20px;}#submit-button {display: block;width: 100%;color: #fff;font-size: 14px;margin: 0;padding: 14px 40px;border: 0;background-color: #f5506e;border-radius: 25px;line-height: 1;cursor: pointer;}#forgot-pass {text-align: center;margin-top: 10px;}#forgot-pass a {color: #868686;font-size: 12px;text-decoration: none;}接下来展示源码，素材图片就是封面哦
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小超&&前端小窝</title><style>* {padding: 0;margin: 0;outline: none;}body {background: linear-gradient(45deg, #fbda61, #ff5acd);display: flex;justify-content: center;align-items: center;height: 100vh;}.shell,form {position: relative;}.shell {display: flex;justify-content: center;}form {width: 562px;height: 520px;background-color: #fff;box-shadow: 0px 15px 40px #b6354e;border-radius: 15px;display: flex;justify-content: center;align-items: center;}#img-box {width: 330px;height: 520px;}#img-box img {height: 100%;margin-left: -175px;border-radius: 20px;}#form-body {width: 320px;display: flex;justify-content: center;align-items: center;flex-direction: column;}#welcome-lines {width: 100%;text-align: center;line-height: 1;}#w-line-1 {color: #7f7f7f;font-size: 50px;}#w-line-2 {color: #9c9c9c;font-size: 30px;margin-top: 17px;}#input-area {width: 100%;margin-top: 40px;}.f-inp {padding: 13px 25px;border: 2px solid #6e6d6d;line-height: 1;border-radius: 20px;margin-bottom: 15px;}.f-inp input {width: 100%;font-size: 14px;padding: 0;margin: 0;border: 0;}.f-inp input::placeholder {color: #b9b9b9;}#submit-button-cvr {margin-top: 20px;}#submit-button {display: block;width: 100%;color: #fff;font-size: 14px;margin: 0;padding: 14px 40px;border: 0;background-color: #f5506e;border-radius: 25px;line-height: 1;cursor: pointer;}#forgot-pass {text-align: center;margin-top: 10px;}#forgot-pass a {color: #868686;font-size: 12px;text-decoration: none;}</style>
</head><body><div class="shell"><div id="img-box"><img src="./a34a7810c48ee409750f92812023beb0-1.jpg" alt=""></div><form action="" method="post"><div id="form-body"><div id="welcome-lines"><div id="w-line-1">HI,xiaochao</div><div id="w-line-2">Welcome Back</div></div><div id="input-area"><div class="f-inp"><input type="text" placeholder="Email Address"></div><div class="f-inp"><input type="password" placeholder="Password"></div></div><div id="submit-button-cvr"><button type="submit" id="submit-button">LOGIN</button></div><div id="forgot-pass"><a href="#">Forgot password?</a></div></div></form></div>
</body></html>最后的效果是这样子的：
大家可以尝试敲一敲，这样一步步就会了解到这种类型的布局，然后自己在尝试几次就可以自己来写自己的专属登录界面然后后期通过js完善一下会更加完美哦！！
看到这别忘三连加关注，爱你们！！！！
相关文章：
二次元的登录界面
今天还是继续坚持写博客，然后今天给大家带来比较具有二次元风格的登录界面，也只是用html和css来写的，大家可以来看看！ 个人名片： 😊作者简介：一名大一在校生，web前端开发专业 &…...
2. 量化多因子数据清洗——去极值、标准化、正交化、中性化
一、去极值 1. MAD MAD（mean absolute deviation）又称为绝对值差中位数法，是一种先需计算所有因子与平均值之间的距离总和来检测离群值的方法. def extreme_MAD(rawdata, n): median rawdata.quantile(0.5) # 找出中位数 new_median (abs(…...
皮卡丘反射型XSS
1.反射型xss(get) 进入反射型xss(get)的关卡，我们可以看到如下页面 先输入合法数据查看情况，例如输入“kobe” 再随便输入一个，比如我舍友的外号“xunlei”，“666”，嘿嘿嘿 F12查看源代码，发现你输入的数…...
巧计口诀-软件测试的生命周期，黑盒测试设计方法
目录 1。口诀 2。黑盒设计方法适用场合 3。黑盒设计方法详解 3.1。等价类法 3.2。 边界值法 3.3。判定表法 3.4。因果表 3.5。状态迁移图 3.6。场景法 3.7。正交实验法 3.8。错误推断法 1。口诀 又到了找工作的日子，背诵这些基本知识和概念又开始了。我找…...
Android系统的Ashmem匿名共享内存系统分析（1）- Ashmem驱动
声明 其实对于Android系统的Ashmem匿名共享内存系统早就有分析的想法，记得2019年6、7月份Mr.Deng离职期间约定一起对其进行研究的，但因为我个人问题没能实施这个计划，留下些许遗憾…文中参考了很多书籍及博客内容，可能涉及的比较…...
Redis 事务详细介绍
事务 注意：Redis单条命令是保证原子性的；但是事务不保证原子性！ Redis事务没有隔离级别的概念，所有的命令在事务中，并没有直接被执行，只有发起执行命令时才执行 Redis事务本质：一组命令的集合&…...
2023-5-29第二十九天
consult咨询，查阅，商讨 specialize专门从事，专攻 inspect检查 pattern图案，方式 optimize使最优化 ensemble整体，全体 subscript下标 subscribe签名 sector行业，部门 precedence优先，优…...
【第三方库】PHP实现创建PDF文件和编辑PDF文件
目录 引入Setasign/fpdf、Setasign/fpdi 解决写入中文时乱码问题 1.下载并放置中文语言包（他人封装）：https://github.com/DCgithub21/cd_FPDF 2.编写并运行生成字体文件的程序文件（addFont.php） 中文字体举例&…...
线程的回收及内存演示
ps -elf|grep mthread 查看进程和线程 top -p 6513 查看内存 一、线程的回收 使用pthread_join 函数： #include <pthread.h> int pthread_join(pthread_t thread, void **retval); 注意：pthread_join 是阻塞函数，如果回收的线…...
高精度倾角传感器测量原理
高精度倾角传感器测量原理技术参数 1.性能参数 测量范围：0～30 测量精度：0.06 分 辨 率：0.0001 测量方向：X,Y 时间漂移：0.08/月 更新时间：30ms 上电启动时间：0.5s 2.电…...
Android 12 init流程分析
前言 刚开始接触需要了解的概念理解过程遇到了什么问题代码的位置和流程分析如何分析和调试遇到的问题 基本的概念 .rc 文件 这个文件在Android framework 中服务相关代码可以看到。类似surfaceflinger.rc 、mediaserver.rc等等。 在这些rc里面定义了某一个service࿰…...
【Python小技巧】Python操控Chrome浏览器实现网页打开、切换、关闭（送独家Chrome操作打包类源码、Chrome浏览器Cookie在哪里？）
文章目录 前言一、什么时候需要用Python控制浏览器？二、下载Chrome浏览器驱动文件1. 安装Chrome浏览器并查看版本2. 下载浏览器驱动文件3. 解压到python编译器目录（python.exe所在目录） 三、Python控制Chrome浏览器（附源代码&…...
数据在内存中的存储
目录 一、数据类型的介绍 1.C语言基本内置类型 2.类型基本归类 1.整形 2.浮点型 3.构造类型 4.指针类型 二、整形在内存中的存储 三、浮点数在内次中的存储 1.存储形式 2.对M、E的特殊规定 （1）对M的特殊规定 （2）对E的…...
Rust in Action笔记 第三章 复合数据类型
通过#[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZI50wIh1-1685693144796)(null)]），不带感叹号的#[allow]仅为下一行代码提供属性，属性有多种分类，文中出现的allow属性称为诊断属性（Diag…...
算法基础学习笔记——⑬高斯消元\组合计数\容斥原理
✨博主：命运之光 ✨专栏：算法基础学习 目录 ✨高斯消元 ✨组合计数 🍓通过预处理逆元的方式求组合数: 🍓Lucas定理: 🍓分解质因数法求组合数： 前言：算法学习笔记记录日常分享，需…...
渗透测试辅助工具箱
0x01 说明 渗透测试辅助工具箱 运行条件：jdk8 双击即可运行 反弹shell，命令生成器，自动编码，输入对应IP端口即可，实现一劳永逸，集成一些小工具，辅助渗透，提高效率 输入框说明 L…...
chatgpt赋能python：Python后退命令：如何让你的程序退回到之前的状态
Python后退命令：如何让你的程序退回到之前的状态 Python是一种高级编程语言，因其易读易懂而闻名于世。Python中有很多命令用于编写程序，其中一项重要的命令是后退命令。本文将介绍Python后退命令的使用方法，并为您提供详细的步骤…...
OJ练习第127题——统计范围内的元音字符串数
统计范围内的元音字符串数 力扣链接：2559. 统计范围内的元音字符串数 题目描述 给你一个下标从 0 开始的字符串数组 words 以及一个二维整数数组 queries 。 每个查询 queries[i] [li, ri] 会要求我们统计在 words 中下标在 li 到 ri 范围内（包含 这…...
图片优化: CssSprites与Base64编码
文章目录 1 css sprites1.1 CSS Sprites是什么1.2 为什么需要css sprites1.3 优势1.4 使用原理1.5 DEMO 2 图片Base64编码 1 css sprites 1.1 CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式。 又被解释为： CSS精灵CSS图像拼合CSS贴图定位CSS图片精灵…...
JavaScript中的Map、WeakMap和Object的区别
Map Map是一种新的数据结构，它允许使用任何数据类型（包括对象和基本数据类型）作为键。 Map的一些特性包括： 保持键的插入顺序：当遍历Map时，键值对会按照插入顺序返回。键可以是任意类型：与Obj…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...