效果图


代码

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)相关推荐

  1. SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面、后端登录接口

    SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...

  2. 复杂的前端登录页面代码

    好的.前端登录页面的代码可能会很复杂,这取决于实现的细节和功能. 基本的前端登录页面可能会包含以下内容: HTML 用于结构化内容,例如表单.输入框和按钮 CSS 用于控制外观和布局 JavaScri ...

  3. 使用JS的promise实现前端登录页面和后端的交互

    使用JS的promise实现前端登录页面和后端的交互 个人认为JS的promise的作用和ajax差不多,形式上也是相似,接下来一起来看看 1.布局一个简单的前端登录页面,不要求细致,能看就问题不大. ...

  4. 用html和css语言编写一个登录页面,简单css登录页面

    CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码 登 陆 微信登陆QQ登陆 注 册 #zuo{ width: 500px; height: 540px; background: whi ...

  5. html前端登录验证码,前端登录页面开发_js生成验证码并验证

    /p> 前端集成开发工具: margin: 0; padding: 0; } a { text-decoration: none; } .main_bar { width: 100%; heig ...

  6. 稍微好看点的登录页面html

    预览图如下,图片自己配,小图标到阿里矢量库自己找 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  7. 拿来即用的前端登录页面(简洁清爽版)

    1.使用bootstrap实现 代码: <!DOCTYPE html> <html lang="en"> <head><meta char ...

  8. 前端登录页面 (背景换肤 + 密码错误提示 + 密码隐藏切换)

    效果展示: 背景切换: 密码提示:(要求密码位数为6-16之间,可自行改变) 代码部分: <!DOCTYPE html> <html lang="en"> ...

  9. 【vue前端】Echarts 3D地球 照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件

    使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...

最新文章

  1. 斯坦福大学马腾宇:无法理解现有的深度学习算法?那就设计一个能理解的
  2. C# MBG 扩展方法类库 分享
  3. scipy 图像处理(scipy.misc、scipy.ndimage)、matplotlib 图像处理
  4. Cisco2620路由器的密码恢复和灾难性恢复
  5. Python进阶_wxpy学习:实用组件
  6. Android 4.4 packageinstaller之权限获取及展现
  7. pyspark distinct代码示例
  8. android中点击按钮弹出一个编辑框,本人是在Button的基础上加了Dialog,Dialog添加了一个编辑框,怎么将Button上的显示文字变成...
  9. 从实例到数理来解析感知机学习算法(PLA)
  10. Spring模块化设计:Spring功能特性如何在不同模块中组织?
  11. DailyRollingFileAppender-设置文件大小和备份数
  12. Python os.makedirs try 以及 raise
  13. 精确覆盖DLX算法模板
  14. 使用ACDsee在一张纸上打印多张图片
  15. UCSD本科数学计算机专业前景如何,2020年UCSD计算机工程排名真该小心来考查
  16. 用计算机充手机吗,电脑充电器可以充手机吗
  17. 高并发解决方案--负载均衡
  18. Knative 带来的极致 Serverless 体验
  19. UVA10917 Walk Through the Forest
  20. MTK camera驱动浅析(1)

热门文章

  1. ★深度优先搜索+解空间树+递归,三合一详解
  2. python文件和数据格式化思维导图,思维导图:Numpy+Pandas
  3. 【项目笔记_答题器】rp552d usb hid 在seewo win10 设备上启动无法识别
  4. 解决编译glad卡在glad opening的问题
  5. iOS 苹果内购详细步骤
  6. 从互动直播到在线抓娃娃,实时视频超低延迟架构的思考与实践
  7. 永磁同步电机力矩控制(九):定子磁场中的若干相关概念
  8. 如此美妙,Python 处理CSV、JSON和XML数据的方法真简便
  9. 我的世界服务器怎么制作头颅,我的世界怎么刷生物头颅_生物头颅制作方法_游戏城...
  10. Kotlin快速学习之路(完整版)