html网页前端技术（html蓝色大气全屏登录页面开发）

旧情劫 2023-06-21 11:39:24

蓝色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗？下午小编教你从无到有的敲代码敲出自己博客最重要的项目高薪就业轻松2倍。

html网页前端技术（html蓝色大气全屏登录页面开发）(1)

项目源代码：

<!DOCTYPE html> <html lang="en"> <head> <title>蓝色登录界面HTML代码</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">  <link rel="stylesheet" type="text/css" href="css/util.css">  <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="limiter"> <div class="container-login100" style="background-image: url('images/img-01.jpg');"> <div class="wrap-login100 p-t-190 p-b-30"> <form class="login100-form validate-form"> <div class="login100-form-avatar"> <img src="http://img.studyofnet.comimages/avatar-01.jpg" alt="AVATAR"> </div> <span class="login100-form-title p-t-20 p-b-45">Hello</span> <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名"> <input class="input100" type="text" name="username" placeholder="用户名" autocomplete="off"> <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-user"></i> </span> </div> <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码"> <input class="input100" type="password" name="pass" placeholder="密码"> <span class="focus-input100"></span> <span class="symbol-input100"> <i class="fa fa-lock"></i> </span> </div> <div class="container-login100-form-btn p-t-10"> <button class="login100-form-btn">登录</button> </div> <div class="text-center w-full p-t-25 p-b-230"> <a href="#" class="txt1">忘记密码？</a> </div> <div class="text-center w-full"> <a class="txt1" href="#"> 立即注册 <i class="fa fa-long-arrow-right"></i> </a> </div> </form> </div> </div> </div> <script src="http://img.studyofnet.comvendor/jquery/jquery-1.12.4.min.js"></script> <script src="http://img.studyofnet.comjs/main.js"></script> </body> </html>

代码运行效果截图

html网页前端技术（html蓝色大气全屏登录页面开发）(2)