效果图

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Login</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-box"><form action=""><h1>Login</h1><div class="form"><div class="item"><i class="fa fa-user-circle-o" aria-hidden="true"></i><input type="text" placeholder="Username" required/></div><div class="item"><i class="fa fa-key" aria-hidden="true"></i><input type="password" placeholder="Password" required/></div></div><button type="submit">Login</button></form>
</div>
</body>
</html>

CSS

body {/*在这里可以设置不同的网页背景图片，也可以设置为循环播放的，暂时没实现*/background: url('24hr-Earth_11.jpeg');/*background: url('earth_view_1.jpeg');*//*background: url('earth_view_2.jpeg');*/background-repeat: no-repeat;background-size: 100% auto;
}#login-box {width: 30%;height: auto;margin: 0 auto;margin-top: 15%;text-align: center;background: #00000090;padding: 20px 50px;
}#login-box h1 {color: #fff;
}#login-box .form .item {margin-top: 15px;
}#login-box .form .item i {font-size: 18px;color: #fff;
}#login-box .form .item input {width: 180px;font-size: 18px;border: 0;border-bottom: 2px solid #fff;padding: 5px 10px;background: #ffffff00;color: #fff;
}#login-box button {margin-top: 15px;width: 180px;height: 30px;font-size: 20px;font-weight: 400;color: #fff;border: 0;border-radius: 15px;/*在这里可以设置不同Login提交按钮的样式*//*background: #1abc9c;*//*background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);*/background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}

资源

百度云链接，提取码: kk8r
资源中的三张图片，可以做高清壁纸哦，如果此文章对你有用的话，请给个一键三连~O(∩_∩)O~

参考

HTML和CSS实现炫酷的登录页面

好看的前端登录页面（HTML+CSS）相关推荐

SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
复杂的前端登录页面代码
好的.前端登录页面的代码可能会很复杂,这取决于实现的细节和功能. 基本的前端登录页面可能会包含以下内容: HTML 用于结构化内容,例如表单.输入框和按钮 CSS 用于控制外观和布局 JavaScri ...
使用JS的promise实现前端登录页面和后端的交互
使用JS的promise实现前端登录页面和后端的交互个人认为JS的promise的作用和ajax差不多,形式上也是相似,接下来一起来看看 1.布局一个简单的前端登录页面,不要求细致,能看就问题不大. ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
html前端登录验证码,前端登录页面开发_js生成验证码并验证
/p> 前端集成开发工具: margin: 0; padding: 0; } a { text-decoration: none; } .main_bar { width: 100%; heig ...
稍微好看点的登录页面html
预览图如下,图片自己配,小图标到阿里矢量库自己找 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
拿来即用的前端登录页面（简洁清爽版）
1.使用bootstrap实现代码: <!DOCTYPE html> <html lang="en"> <head><meta char ...
前端登录页面（背景换肤 + 密码错误提示 + 密码隐藏切换）
效果展示: 背景切换: 密码提示:(要求密码位数为6-16之间,可自行改变) 代码部分: <!DOCTYPE html> <html lang="en"> ...
【vue前端】Echarts 3D地球照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件
使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...

好看的前端登录页面（HTML+CSS）

效果图

代码

HTML

CSS

资源

参考

好看的前端登录页面（HTML+CSS）相关推荐

最新文章

热门文章