devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

简单的HTML登录界面_html登录页面代码

作者：weixin_40725706 | 2024-06-02 21:58:41

赞

踩

html登录页面代码

1

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  7.     <link rel="stylesheet" href="css/login.css">
  8.     <title>登陆</title>
  9. </head>
  10. <body>
  11. <main class="main" role="main">
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="offset-md-3 col-md-6">
  15.                 <form class="form-container">
  16.                     <h2>登陆</h2>
  17.                     <div class="form-group">
  18.                         <label for="exampleInputEmail1">用户名</label>
  19.                         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入用户名">
  20.                     </div>
  21.                     <div class="form-group">
  22.                         <label for="exampleInputPassword1">密码</label>
  23.                         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  24.                     </div>
  25.                     <div class="form-group form-check">
  26.                         <input type="checkbox" class="form-check-input" id="exampleCheck1">
  27.                         <label class="form-check-label" for="exampleCheck1">记住信息</label>
  28.                     </div>
  29.                     <button type="submit" class="btn btn-success btn-block">登录</button>
  30.                 </form>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </main>
  35. <div class="footer">
  36.     <div class="container">
  37.         登录页面 @2020年5月10日
  38.     </div>
  39. </div>
  40.  
  41. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  42. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  43. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  44. </body>
  45. </html>

完整的代码：https://download.csdn.net/download/mingzi1245/12406211

2.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>login</title>
  9. </head>
  10.  
  11. <body>
  12.     <div>
  13.         <div>
  14.             <!-- 左上角部分 -->
  15.             <div class="chrome">
  16.                 <span>欢迎</span>
  17.                 <span>使用</span>
  18.             </div>
  19.  
  20.             </div>
  21.  
  22.             <!-- 中间部分 -->
  23.             <div class="center">
  24.                 <!-- 登陆框 -->
  25.                 <div class="user">
  26.                     <p class="cuser">账号登录</p>
  27.                     <!-- 用户名密码及登录按钮部分 -->
  28.                     <div class="form">
  29.                         <div class="user1">
  30.                             <img src="images/user.png" alt="">
  31.  
  32.                             <input type="text" placeholder="邮箱">
  33.                         </div>
  34.                         <div class="user2">
  35.                             <img src="images/passwd.png" alt="">
  36.                             <input type="password" placeholder="密码">
  37.                         </div>
  38.                         <div>
  39.                             <button type="button">马上登录</button>
  40.                         </div>
  41.                     </div>
  42.                     <div style="height: 25px;"></div>
  43.                     <div class="mima">
  44.                         <p class="jz">
  45.                             <input type="checkbox" class="box">
  46.                             <span>记住密码</span>
  47.                         </p>
  48.                         <p class="wj">忘记密码?
  49.                             <a href="#">立即找回</a>
  50.                         </p>
  51.                     </div>
  52.                 </div>
  53.             </div>
  54.  
  55.             <!-- 底部部分 -->
  56.             <div class="foot">
  57.                 <p class="banquan">
  58.                     2020年5月10日
  59.                 </p>
  60.             </div>
  61.         </div>
  62.  
  63.     </div>
  64.  
  65. </body>
  66.  
  67. </html>

完整的代码：https://download.csdn.net/download/mingzi1245/12406208 

 

3

 html代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>后台管理系统</title>
  6. </head> 
  7.  
  8. <body>
  9. 	<div class="logo_box"><img class="logo_img" src="images/login_logo.png"></div>
  10. 	<div class="login_box">
  11. 		<h1 class="title">欢迎登录</h1>
  12. 		<input class="input_box" type="text" placeholder="用户名">
  13. 		<input class="input_box" type="password" placeholder="密码">
  14. 		<input class="button_box" type="button" value="登录">
  15. 	</div>
  16. 	
  17. </body>
  18. </html>

 css代码

  1.  
  2. 	body {
  3. 		background-color: #8ea4f8;
  4. 		background-image: url(images/background.jpg);
  5. 		background-repeat: no-repeat;
  6. 		background-size: cover; //背景图适应屏幕
  7.  
  8. 	}
  9. 	.login_box {
  10. 		width: 400px;
  11. 		height: 400px;
  12. 		background-color: #fff;
  13. 		margin: auto;
  14. 		margin-top: 150px;
  15. 		border-radius: 5px;
  16. 		overflow: hidden;//.title设置margin-top无效，给父元素设置overflow:hidden;
  17. 	}
  18. 	.title {
  19. 		text-align: center;
  20. 		font-size: 28px;
  21. 		color: #000;
  22. 		margin-top: 80px;
  23. 		margin-bottom: 10px;
  24. 		letter-spacing: 3px;
  25. 		font-family: sans-serif;
  26. 	}
  27. 	.input_box {
  28. 		width: 300px;
  29. 		height: 30px;
  30. 		width: 300px;
  31. 		height: 40px;
  32. 		padding-left: 10px;
  33. 		margin-top: 20px;
  34. 		margin-left: 50px;
  35. 	}
  36. 	.button_box {
  37. 		width: 300px;
  38. 		height: 35px;
  39. 		width: 300px;
  40. 		height: 40px;
  41. 		margin-top: 20px;
  42. 		margin-left: 50px;
  43. 		border-radius: 5px;
  44. 		background-color: #64a9d9;
  45. 		cursor: pointer;
  46. 		color: #fff;
  47. 	}
  48. 	.logo_box {
  49. 		position: absolute;
  50. 		background-color: #fff;
  51. 		width: 100px;
  52. 		height: 100px;
  53. 		border-radius: 100px;
  54. 		top: 100px;
  55. 		left: 46%;
  56. 		border: solid 5px #A68364;
  57. 		text-align: center;
  58. 	}
  59. 	.logo_img {
  60. 		margin-top: 20px;
  61. 	}

完整的代码：https://download.csdn.net/download/mingzi1245/12406204

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/664495
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号