当前位置： 首页 > news >正文

二次元的登录界面

news 文章来源：https://blog.csdn.net/weixin_64965154/article/details/130907893 2025/4/22 12:04:33

今天还是继续坚持写博客，然后今天给大家带来比较具有二次元风格的登录界面，也只是用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完善一下会更加完美哦！！

看到这别忘三连加关注，爱你们！！！！

相关文章：

二次元的登录界面

今天还是继续坚持写博客&#xff0c;然后今天给大家带来比较具有二次元风格的登录界面&#xff0c;也只是用html和css来写的&#xff0c;大家可以来看看&#xff01; 个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大一在校生&#xff0c;web前端开发专业 &…...

编程日记 2023/6/6 2:49:11

2. 量化多因子数据清洗——去极值、标准化、正交化、中性化

一、去极值 1. MAD MAD&#xff08;mean absolute deviation&#xff09;又称为绝对值差中位数法&#xff0c;是一种先需计算所有因子与平均值之间的距离总和来检测离群值的方法. def extreme_MAD(rawdata, n): median rawdata.quantile(0.5) # 找出中位数 new_median (abs(…...

编程日记 2023/6/6 2:44:10

皮卡丘反射型XSS

1.反射型xss(get) 进入反射型xss(get)的关卡&#xff0c;我们可以看到如下页面 先输入合法数据查看情况&#xff0c;例如输入“kobe” 再随便输入一个&#xff0c;比如我舍友的外号“xunlei”&#xff0c;“666”&#xff0c;嘿嘿嘿 F12查看源代码&#xff0c;发现你输入的数…...

编程日记 2023/6/6 2:39:09

巧计口诀-软件测试的生命周期，黑盒测试设计方法

目录 1。口诀 2。黑盒设计方法适用场合 3。黑盒设计方法详解 3.1。等价类法 3.2。 边界值法 3.3。判定表法 3.4。因果表 3.5。状态迁移图 3.6。场景法 3.7。正交实验法 3.8。错误推断法 1。口诀 又到了找工作的日子&#xff0c;背诵这些基本知识和概念又开始了。我找…...

编程日记 2023/6/6 2:34:08

Android系统的Ashmem匿名共享内存系统分析（1）- Ashmem驱动

声明 其实对于Android系统的Ashmem匿名共享内存系统早就有分析的想法&#xff0c;记得2019年6、7月份Mr.Deng离职期间约定一起对其进行研究的&#xff0c;但因为我个人问题没能实施这个计划&#xff0c;留下些许遗憾…文中参考了很多书籍及博客内容&#xff0c;可能涉及的比较…...

编程日记 2023/6/6 2:29:07

Redis 事务详细介绍

事务 注意&#xff1a;Redis单条命令是保证原子性的&#xff1b;但是事务不保证原子性&#xff01; Redis事务没有隔离级别的概念&#xff0c;所有的命令在事务中&#xff0c;并没有直接被执行&#xff0c;只有发起执行命令时才执行 Redis事务本质&#xff1a;一组命令的集合&…...

编程日记 2023/6/6 2:24:05

2023-5-29第二十九天

consult咨询&#xff0c;查阅&#xff0c;商讨 specialize专门从事&#xff0c;专攻 inspect检查 pattern图案&#xff0c;方式 optimize使最优化 ensemble整体&#xff0c;全体 subscript下标 subscribe签名 sector行业&#xff0c;部门 precedence优先&#xff0c;优…...

编程日记 2023/6/6 2:19:04

【第三方库】PHP实现创建PDF文件和编辑PDF文件

目录 引入Setasign/fpdf、Setasign/fpdi 解决写入中文时乱码问题 1.下载并放置中文语言包&#xff08;他人封装&#xff09;&#xff1a;https://github.com/DCgithub21/cd_FPDF 2.编写并运行生成字体文件的程序文件&#xff08;addFont.php&#xff09; 中文字体举例&…...

编程日记 2023/6/6 2:14:03

线程的回收及内存演示

ps -elf|grep mthread 查看进程和线程 top -p 6513 查看内存 一、线程的回收 使用pthread_join 函数&#xff1a; #include <pthread.h> int pthread_join(pthread_t thread, void **retval); 注意&#xff1a;pthread_join 是阻塞函数&#xff0c;如果回收的线…...

编程日记 2023/6/6 2:09:02

高精度倾角传感器测量原理

高精度倾角传感器测量原理技术参数 1.性能参数 测量范围&#xff1a;0&#xff5e;30 测量精度&#xff1a;0.06 分 辨 率&#xff1a;0.0001 测量方向&#xff1a;X,Y 时间漂移&#xff1a;0.08/月 更新时间&#xff1a;30ms 上电启动时间&#xff1a;0.5s 2.电…...

编程日记 2023/6/6 2:04:01

Android 12 init流程分析

前言 刚开始接触需要了解的概念理解过程遇到了什么问题代码的位置和流程分析如何分析和调试遇到的问题 基本的概念 .rc 文件 这个文件在Android framework 中服务相关代码可以看到。类似surfaceflinger.rc 、mediaserver.rc等等。 在这些rc里面定义了某一个service&#xff0…...

编程日记 2023/6/6 1:58:59

【Python小技巧】Python操控Chrome浏览器实现网页打开、切换、关闭（送独家Chrome操作打包类源码、Chrome浏览器Cookie在哪里？）

文章目录 前言一、什么时候需要用Python控制浏览器&#xff1f;二、下载Chrome浏览器驱动文件1. 安装Chrome浏览器并查看版本2. 下载浏览器驱动文件3. 解压到python编译器目录&#xff08;python.exe所在目录&#xff09; 三、Python控制Chrome浏览器&#xff08;附源代码&…...

编程日记 2023/6/6 1:53:59

数据在内存中的存储

目录 一、数据类型的介绍 1.C语言基本内置类型 2.类型基本归类 1.整形 2.浮点型 3.构造类型 4.指针类型 二、整形在内存中的存储 三、浮点数在内次中的存储 1.存储形式 2.对M、E的特殊规定 &#xff08;1&#xff09;对M的特殊规定 &#xff08;2&#xff09;对E的…...

编程日记 2023/6/6 1:48:58

Rust in Action笔记 第三章 复合数据类型

通过#[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZI50wIh1-1685693144796)(null)]&#xff09;&#xff0c;不带感叹号的#[allow]仅为下一行代码提供属性&#xff0c;属性有多种分类&#xff0c;文中出现的allow属性称为诊断属性&#xff08;Diag…...

编程日记 2023/6/6 1:43:57

算法基础学习笔记——⑬高斯消元\组合计数\容斥原理

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨高斯消元 ✨组合计数 &#x1f353;通过预处理逆元的方式求组合数: &#x1f353;Lucas定理: &#x1f353;分解质因数法求组合数&#xff1a; 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需…...

编程日记 2023/6/6 1:38:56

渗透测试辅助工具箱

0x01 说明 渗透测试辅助工具箱 运行条件&#xff1a;jdk8 双击即可运行 反弹shell&#xff0c;命令生成器&#xff0c;自动编码&#xff0c;输入对应IP端口即可&#xff0c;实现一劳永逸&#xff0c;集成一些小工具&#xff0c;辅助渗透&#xff0c;提高效率 输入框说明 L…...

编程日记 2023/6/6 1:33:55

chatgpt赋能python：Python后退命令：如何让你的程序退回到之前的状态

Python后退命令&#xff1a;如何让你的程序退回到之前的状态 Python是一种高级编程语言&#xff0c;因其易读易懂而闻名于世。Python中有很多命令用于编写程序&#xff0c;其中一项重要的命令是后退命令。本文将介绍Python后退命令的使用方法&#xff0c;并为您提供详细的步骤…...

编程日记 2023/6/6 1:28:54

OJ练习第127题——统计范围内的元音字符串数

统计范围内的元音字符串数 力扣链接&#xff1a;2559. 统计范围内的元音字符串数 题目描述 给你一个下标从 0 开始的字符串数组 words 以及一个二维整数数组 queries 。 每个查询 queries[i] [li, ri] 会要求我们统计在 words 中下标在 li 到 ri 范围内&#xff08;包含 这…...

编程日记 2023/6/6 1:23:52

图片优化: 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是一种网页图片应用处理方式。 又被解释为&#xff1a; CSS精灵CSS图像拼合CSS贴图定位CSS图片精灵…...

编程日记 2023/6/6 1:18:52

JavaScript中的Map、WeakMap和Object的区别

Map Map是一种新的数据结构&#xff0c;它允许使用任何数据类型&#xff08;包括对象和基本数据类型&#xff09;作为键。 Map的一些特性包括&#xff1a; 保持键的插入顺序&#xff1a;当遍历Map时&#xff0c;键值对会按照插入顺序返回。键可以是任意类型&#xff1a;与Obj…...

编程日记 2023/6/6 1:13:51

华为OD机试之打印机队列（Java源码）

打印机队列 题目描述 有5台打印机打印文件&#xff0c;每台打印机有自己的待打印队列。 因为打印的文件内容有轻重缓急之分&#xff0c;所以队列中的文件有1~10不同的代先级&#xff0c;其中 数字越大优先级越高 打印机会从自己的待打印队列中选择优先级最高的文件来打印。 如…...

编程日记 2023/6/6 1:08:49

分享一个国内免费的ChatGPT网站，手机电脑通用，免费无限制，支持AI绘画

背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具&#xff0c;近期的热度直接沸腾&#x1f30b;。 作为一个AI爱好者&#xff0c;翻遍了各大基于ChatGPT的网站&#xff0c;终于找到一个免费&#xff01;免登陆&#xff01;手机电脑通用&#xff01;国内可直接对话的C…...

编程日记 2023/6/6 1:03:48

【面向对象编程1】——类和对象——如桃花来

目录索引 面向过程和面向对象的区别&#xff1a;面向过程&#xff1a;面向对象&#xff1a;总结&#xff1a; 类和对象&#xff1a;定义类&#xff1a;语法&#xff1a; 创建对象&#xff1a;实例演示&#xff1a; 魔法方法&#xff1a;__init __方法&#xff1a;__ del __方法…...

编程日记 2023/6/6 0:58:47

chat聊天系统消息消费时遇到的问题及优化思路(二)

1、前言 考虑下面几个条件下如何提升kafka的消费速度 消息要求严格有序&#xff0c;如chat聊天消息业务处理速度慢&#xff0c;如处理一条数据需要100ms分片不合理&#xff0c;如有的分区很闲&#xff0c;有的分区消息数量积压 2、解决方案 1、顺序问题 关于消息消费时存在…...

编程日记 2023/6/6 0:53:46

js正则中的match()

在前端开发中&#xff0c;正则表达式是一大利器。所以我们这次就来讨论下match()方法。 match本身是JavaScript语言中字符串对象的一个方法&#xff0c;该方法的签名是 match([string] | [RegExp]) 它的参数既可以是一个字符串&#xff0c;也可以是一个正则表达式。该方法绝…...

编程日记 2023/6/6 0:48:45

Apache 配置和应用

目录 构建虚拟 Web 主机 Options指令解释 Options指令常用选项 AllowOverride指令解释&#xff1a; 地址限制策略&#xff1a; httpd服务支持的虚拟主机类型包括以下三种: 基于域名的虚拟主机 1&#xff0e;为虚拟主机提供域名解析 2.为虚拟主机准备网页文档 3.添加虚拟…...

编程日记 2023/6/6 0:43:44

实现PyTorch/ONNX自定义节点操作的TensorRT部署

参考一 下面是基本步骤&#xff1a; 加载训练好的bev transformer网络权重参数&#xff1a; import torch from model import Modelmodel Model() model.load_state_dict(torch.load("path/to/weights"))定义新的自定义操作&#xff1a; import torch from torc…...

编程日记 2023/6/6 0:38:43

Shamir 秘密共享、GMW和BGW方案

一、Shamir秘密共享 Shamir秘密共享方案是一种将秘密拆分成多份并分配给多个参与者保存&#xff0c;只有在满足特定条件下才能恢复原始秘密的密码学方案。它具有良好的容错性、加法同态性和无条件安全性等特点。 具体地&#xff0c;Shamir秘密共享方案可以概括为以下步骤&…...

编程日记 2023/6/6 0:33:43

Day56【动态规划】583.两个字符串的删除操作、72.编辑距离

583.两个字符串的删除操作 力扣题目链接/文章讲解 视频讲解 1、确定 dp 数组下标及值含义 dp[i][j]&#xff1a;以下标 i 为结尾的字符串 word1&#xff0c;和以下标 j 为结尾的字符串 word2&#xff0c;想要达到相等&#xff0c;所需要删除元素的最少次数为 dp[i][j] 2、…...

编程日记 2023/6/6 0:28:41

Arnold图像置乱的MATLAB实现

这件事情的起因是这样的&#xff0c;我需要研究一下各种图像置乱的算法。然后在知乎上找到了一篇关于Arnold变化的文章&#xff0c;但是呢&#xff0c;这个人实际上是卖资料&#xff0c;代做大作业的。详细的代码根部不给你&#xff0c;则给我气坏了&#xff0c;必须要手动实现…...

编程日记 2023/6/6 0:23:41