好看的登录界面源码,希望您喜欢

闲来无事,写几个好看的html界面玩一玩!

登录界面一:

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Business Login</title><style>body {font-family: 'Arial', sans-serif;background-color: #f4f4f4;margin: 0;display: flex;align-items: center;justify-content: center;height: 100vh;}.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px; /* 固定宽度 */text-align: center;max-height: calc(300px * 1.618); /* 使用黄金比例计算最大高度 */overflow: hidden; /* 隐藏溢出的部分 */}.login-container h2 {color: #333;}.login-form {margin-top: 20px;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 8px;color: #555;}input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}button {background-color: #4caf50;color: #fff;padding: 10px 15px;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}</style>
</head>
<body><div class="login-container"><h2> Welcome To My Page</h2><form class="login-form"><div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div></body>
</html>

效果

在这里插入图片描述

登录界面二:

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Business Login</title><style>body {margin: 0;font-family: 'Arial', sans-serif;background: url('https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=21526&resolution=1000w680h') no-repeat center center fixed; /* 示例图片链接,请替换为你的图片路径 */background-size: cover;height: 100vh;display: flex;align-items: center;justify-content: center; /* 将登录框放置在页面中央 */}.login-container {background-color: rgba(255, 255, 255, 0.5); /* 使用半透明的白色背景 */padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);width: 300px;text-align: center;margin-left: 50%;}.login-container h2 {color: #333;}.login-form {margin-top: 20px;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 8px;color: #555;}input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}button {background-color: #4caf50;color: #fff;padding: 10px 15px;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}</style>
</head>
<body><div class="login-container"><h2>Welcome To My Page</h2><form class="login-form"><div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div></body>
</html>

效果

在这里插入图片描述

登录界面三:

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Business Login</title><style>body {margin: 0;font-family: 'Arial', sans-serif;background: url('https://huamaobizhi.com/appApi/wallpaper/getImages_1_0/?pid=21526&resolution=1000w680h') no-repeat center center fixed;background-size: cover;height: 100vh;display: flex;align-items: center;justify-content: center;}.login-container {background-color: rgba(255, 255, 255, 0.9);padding: 30px;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);width: 400px;text-align: center;}.login-container h2 {color: #333;margin-bottom: 20px;}.login-form {display: flex;flex-direction: column;align-items: center;}.form-group {margin-bottom: 20px;width: 100%;}label {display: block;margin-bottom: 8px;color: #555;text-align: left;}input {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;}button {background-color: #4caf50;color: #fff;padding: 12px;border: none;border-radius: 4px;cursor: pointer;width: 100%;font-size: 16px;}button:hover {background-color: #45a049;}</style>
</head>
<body><div class="login-container"><h2>Welcome To My Page</h2><form class="login-form"><div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div></body>
</html>

效果

在这里插入图片描述

亲爱的朋友

在这个特别的日子,我想送上最诚挚的祝福。愿你在新的一年里,健康快乐,事业顺利,家庭幸福,梦想成真。愿你的每一天都充满阳光,每一步都是坚定向前,每一个梦想都能如期实现。愿你的笑容永远灿烂,心中永远充满希望。

无论遇到什么困难和挑战,我都会陪伴在你身边,支持你,鼓励你,和你一同面对,一同克服。愿你勇敢地迎接生活的每一个挑战,永远保持乐观和坚韧的心态。

愿你的人生如同一朵绽放的花朵,绽放出绚丽的色彩,散发出芬芳的香气,为这个世界增添美好。愿你的每一天都是美好的开始,每一天都是值得珍惜的时刻。

最后,衷心祝福你,新的一年里,万事如意,幸福安康。

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

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

相关文章

MySQL表的基础操作

创建表 create table 表名&#xff08;列名 类型&#xff0c;列名 类型……&#xff09; 注意 1.在进行表操作之前都必须选中数据库 2.表名&#xff0c;列名等一般不可以与关键字相同&#xff0c;如果确定相同&#xff0c;就必须用反引号引住 3.可以使用comment来增加字段说…

c++水仙花数

一.什么是水仙花数 水仙花数是一个三位数它的个位,十位,百位的三次幂相加的和为他本身 例如:1*1*15*5*53*3*3153及153为水仙花数 二.代码 三.样例

98.网游逆向分析与插件开发-网络通信封包解析-定位明文发送数据的关键函数

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;项目需求与需求拆解 通过上一个内容有了对网络通信架构有一个简单认识了解&#xff0c;对于我们重要的点是 组织数据 到 加密数据之间的过程&#xff0c;这个过程的数据我们是可以看懂的&#xff0c;…

【python5】闭包/装饰器,

文章目录 1.闭包和装饰器&#xff1a;函数里return就是闭包2.解析eeprom&#xff1a;如下是二进制文件&#xff0c;C8是一个字节3.json/configparser/optparse&#xff1a;json.dumps&#xff08;将字典转化为字符串&#xff0c;将json信息写进文件&#xff09;&#xff0c;jso…

华为环网双机接入IPTV网络部署案例

环网双机接入IPTV网络部署案例 组网图形 图2 环网双机场景IPTV基本组网图 方案简介配置注意事项组网需求数据规划配置思路操作步骤配置文件 方案简介 随着IPTV业务的迅速发展&#xff0c;IPTV平台承载的用户也越来越多&#xff0c;用户对IPTV直播业务的可靠性要求越来越高。…

图灵日记--MapSet字符串常量池反射枚举Lambda表达式泛型

目录 搜索树概念实现性能分析和 java 类集的关系 搜索概念及场景模型 Map的使用Map常用方法 Set的说明常见方法说明 哈希表冲突-避免-负载因子调节冲突-解决-闭散列冲突-解决-开散列/哈希桶冲突严重时的解决办法 实现和 java 类集的关系 字符串常量池String对象创建intern方法 …

深入理解Go的垃圾回收机制

导语 如果你是一位Golang的开发者&#xff0c;你一定对于语言特性和详细结构有所了解。但是&#xff0c;你是否曾经停下来深入研究过Golang背后复杂而强大的垃圾回收&#xff08;GC&#xff09;机制&#xff1f;在这篇文章中&#xff0c;我们将具体深入探讨Golang垃圾回收机制…

机器学习系列——(十五)随机森林回归

引言 在机器学习的众多算法中&#xff0c;随机森林以其出色的准确率、对高维数据的处理能力以及对训练数据集的异常值的鲁棒性而广受欢迎。它是一种集成学习方法&#xff0c;通过构建多个决策树来进行预测和分类。本文将重点介绍随机森林在回归问题中的应用&#xff0c;即随机…

DP读书:《openEuler操作系统》(九)从IPC到网卡到卡驱动程序

DP读书&#xff1a;《openEuler操作系统》从IPC到网卡到卡驱动程序&#xff09; 上章回顾_SPI上节回顾_TCP 网卡驱动程序简介1.设备驱动2.总线与设备3.网卡及其抽象 驱动程序的注册与注销1. 注册2. 注销 设备初始化1. 硬件初始化2. 软件初始化 设备的打开与关闭1. 设备的打开2.…

微软和苏黎世联邦理工学院开源SliceGPT创新压缩技术节省大量部署资源;OpenAI成立儿童安全团队,防AI误用

&#x1f989; AI新闻 &#x1f680; 微软和苏黎世联邦理工学院开源SliceGPT创新压缩技术节省大量部署资源 摘要&#xff1a;微软和苏黎世联邦理工学院研究人员开源了SliceGPT&#xff0c;通过对大模型的权重矩阵进行压缩切片&#xff0c;实现了模型紧缩&#xff0c;节省了部…

Spring Boot 笔记 002 整合mybatis做数据库读取

概念 MyBatis 是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Old Java Objec…

书生谱语-大语言模型测试demo

课程内容简介 1.作业 demo1 demo2 demo3 demo4

【leetcode】206. 反转链表(简单)题解学习

题目描述&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 …

【十五】【C++】list的简单实现

list 的迭代器解引用探究 /*list的迭代器解引用探究*/ #if 1 #include <list> #include <vector> #include <iostream> #include <algorithm> using namespace std;class Date {private:int _year;int _month;int _day;public:Date(): _year(2024), _m…

【CC++】内存管理2:new + delete

前言 今天继续来学new和delete operator new 与operator delete函数 new和delete是用户进行动态内存申请和释放的操作符&#xff0c;operator new 和operator delete是系统提供的全局函数&#xff0c;new在底层调用operator new全局函数来申请空间&#xff0c;delete在底层通…

【开源】基于JAVA+Vue+SpringBoot的二手车交易系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手车档案管理模块2.3 车辆预约管理模块2.4 车辆预定管理模块2.5 车辆留言板管理模块2.6 车辆资讯管理模块 三、系统设计3.1 E-R图设计3.2 可行性分析3.2.1 技术可行性分析3.2.2 操作可行性3.2.3 经济…

Java核心设计模式:代理设计模式

一、生活中常见的代理案例 房地产中介&#xff1a;客户手里没有房源信息&#xff0c;找一个中介帮忙商品代购&#xff1a;代理者一般有好的资源渠道&#xff0c;降低购物成本&#xff08;如海外代购&#xff0c;自己不用为了买东西出国&#xff09; 二、为什么要使用代理 对…

AI修复历史人物 图像转真人 绝密档案

修复李白 开启control 不要点爆炸小按钮 权重建议&#xff1a;0.7-1.2 采样&#xff1a;DPM SDE Karras 如果人眼不好&#xff0c;开启高清修复&#xff0c;进行2次尝试 高难度 修复张居正 softhed 1 lineart_真实 1 适当调整lineart进入值。 如果效果不好&#xff…

CentOS安装MySQL

下载安装MySQL 官网下载MySQL ① 下载&#xff1a;访问链接&#xff1a;MySQL下载 ② 安装&#xff1a;将安装包上传并解压&#xff0c;解压&#xff1a; tar -zxvf mysql-x.x.xx-xxx.tar.gzyum安装MySQL ① 更新yum&#xff1a;sudo yum update ② 下载MySQL的rpm包&#…

【大厂AI课学习笔记】【1.6 人工智能基础知识】(2)机器学习

目录 必须理解的知识点&#xff1a; 举一个草莓的例子&#xff1a; 机器学习的三个类别&#xff1a; 监督学习&#xff1a; 无监督学习&#xff1a; 强化学习&#xff1a; 更多知识背景&#xff1a; 机器学习的诞生需求 监督学习的关键技术与实现步骤 无监督学习的关…