1.首先是登录页面效果展示

2.代码如下

<!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>Login</title><style>* {margin: 0;padding: 0;}body{/* 页面的透明图 0-1 */opacity: 0.8;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;/* 页面的背景图片，可以修改 */background:url(img/4.jpg) ;background-size: cover;}.box{border-radius: 20px;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 380px;width: 350px;border-top: 1px solid rgba(255, 255, 255, 0.5);border-left: 1px solid rgba(255, 255, 255, 0.5);border-bottom: 1px solid rgba(255, 255, 255, 0.2);border-right: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);background: rgba(255, 255, 255, 0.2);}.box h2{color: rgba(255, 255, 255, 0.9);margin-bottom: 20px;}.box .input-box{display: flex;flex-direction: column;justify-content: center;align-items: start;margin-bottom: 10px;}.box .input-box label{margin-bottom: 5px;color: rgba(255, 255, 255, 0.9);font-size: 13px;}.box .input-box input{box-sizing: border-box;color: rgba(255, 255, 255, 0.9);font-size: 14px;height: 35px;width: 250px;background:rgba(255, 255, 255, 0.3);border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 5px;transition: 0.2s;outline: none;padding: 0 10px;letter-spacing: 1px;}.box .input-box input:focus{border: 1px solid rgba(255, 255, 255, 0.8);}.box .btn-box {width: 250px;display: flex;flex-direction: column;justify-content: center;align-items: start;}.box .btn-box a{font-size: 13px;width: 250px;text-align: end;text-decoration: none;color: rgba(255, 255, 255, 0.9);transition: 0.2s;}.box .btn-box a:hover{color: rgba(255, 255, 255, 1);}.box .btn-box div{display: flex;flex-direction: row;justify-content: center;align-items: start;margin-top: 20px;}.box .btn-box div button{width: 115px;height: 35px;border: 1px solid rgba(197, 81, 58, 0.8);background: rgba(197, 81, 58, 0.5);color: rgba(255, 255, 255, 0.9);border-radius: 5px;transition: 0.2s;}.box .btn-box div button:nth-of-type(2){margin-left: 10px;}.box .btn-box div button:hover{border: 1px solid rgba(248, 108, 76, 0.8);background: rgba(248, 108, 76, 0.5);}</style>
</head>
<body><div class="box"><h2>Login</h2><div class="input-box"><label for="">账号</label><input type="text"></div><div class="input-box"><label for="">密码</label><input type="password"></div><div class="btn-box"><a href="#">忘记密码？</a><div><button alert="确定登录？">登录</button><button>注册</button></div></div></div></body>
</html>

背景图片是可以随便修改的，你只需要建立一个img文件夹，把背景图片放进去就好

html+css精致的登录页面（含源码的哦）相关推荐

Emlog5.31后台登录页面自适应源码
简介: 给大家带来一个Emlog5.31后台登录页面自适应源码非常好看. admin\views\css 里面的文件全部放到你的admin\views\css 里面去 admin\views\log ...
用HTML+CSS+less做一个rem布局苏宁手机端商城页面含源码分享
效果如下所示: less需要事先下载node,具体下载过程百度搜索安装即可整体文件夹如下: 源码分享:https://pan.baidu.com/s/1IqhFh7V3SoTW8KShGP7kgA ...
用HTML和CSS做一个简单的静态京东手机端页面含源码分享
10分钟内的时间可以完成,具体完成效果如下: 百度链接:https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg 提取码:42jq 整体文件为: 代码部分: i ...
Django入门完整教程之如何使用 Django 和 Bulma CSS 构建 CMS（教程含源码）
在本教程中,您将使用 Django 创建一个内容管理系统,用户将在其中: 添加新帖子显示所有帖子编辑帖子一.环境搭建创建项目目录,cd到项目目录 mkdir CMS cd CMS 安装djan ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...
DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...
HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...
HTML+CSS静态页面网页设计作业——洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:洪江市旅游网站设计--洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司. ...
HTML5期末大作业：化妆品电商网站设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...

html+css精致的登录页面（含源码的哦）

1.首先是登录页面效果展示

2.代码如下

html+css精致的登录页面（含源码的哦）相关推荐

最新文章

热门文章

html+css精致的登录页面 （含源码的哦）

1.首先是登录页面效果展示

2.代码如下

html+css精致的登录页面 （含源码的哦）相关推荐

最新文章

热门文章

html+css精致的登录页面（含源码的哦）

html+css精致的登录页面（含源码的哦）相关推荐