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

二次元的登录界面

news 2026/2/8 12:10:45

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/2/2 9:25:26

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59