手写代码简单实现登录界面,登录界面怎么做

！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' link rel=' style sheet ' href=' http://at.Ali cdn.com/t/font _ 1786038 _ m62 pqneyrzf.CSS ' } html { height: 100%； } body { height: 100%；字体文件： jetbrainsmonomedium； display :闪存； align-items3360中心；内容：中心； /* background-color: #0e92b3； */background : URL (img/city.png ) no-repeat； background-size: 100% 100%； } .form-wrapper { width: 300px； background-color : rgba (41、45、62、8)； color: #fff； border-radius: 2px； padding: 50px； }.form-wrapper.header { text-align : center；字体大小： 35px； text-transform: uppercase； line-height: 100px； }.form-wrapper.input-wrapper input { background-color : RGB (41、45、62 )； border: 0； width: 100%；文本照明3360中心；字体大小： 15px； color: #fff； outline: none； }.form-wrapper.input-wrapper input :3360 placeholder { text-transform 3360 upper case； }.form-wrapper.input-wrapper.border-wrapper { background-image 3360 linear-gradient (to right，#e8198b，# 0e ww height: 50px；边距- bottom : 20px； border-radius: 30px； display :闪存； align-items3360中心；内容：中心； }.form-wrapper.input-wrapper.border-wrapper.border-item { height 3360 calc (100 %-4px )； width:calc(100%-4px； border-radius: 30px； }.form-wrapper.action { display : flex；内容：中心； }.form-wrapper.action.BTN { width :60 %； text-transform: uppercase；

border: 2px solid #0e92b3; text-align: center; line-height: 50px; border-radius: 30px; cursor: pointer; } .form-wrapper .action .btn:hover { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } .form-wrapper .icon-wrapper { text-align: center; width: 60%; margin: 0 auto; margin-top: 20px; border-top: 1px dashed rgb(146, 146, 146); padding: 20px; } .form-wrapper .icon-wrapper i { font-size: 20px; color: rgb(187, 187, 187); cursor: pointer; border: 1px solid #fff; padding: 5px; border-radius: 20px; } .form-wrapper .icon-wrapper i:hover { background-color: #0e92b3; } </style></head><body> <div class="form-wrapper"> <div class="header"> login </div> <div class="input-wrapper"> <div class="border-wrapper"> <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off"> </div> <div class="border-wrapper"> <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off"> </div> </div> <div class="action"> <div class="btn">login</div> </div> <div class="icon-wrapper"> <i class="iconfont icon-weixin"></i> <i class="iconfont icon-qq"></i> <i class="iconfont icon-git"></i> </div> </div></body></html>

矮小的钢笔：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background: url('img/city.png') no-repeat; background-size: 100% auto; } #login_box { width: 20%; height: 400px; background-color: #00000060; margin: auto; margin-top: 10%; text-align: center; border-radius: 10px; padding: 50px 50px; } #login_box input, #login_box button { outline: none; } #login_box h2 { color: #ffffff90; margin-top: 5%; } #login_box #form #input_box { margin-top: 5%; } #login_box #form #input_box input { border: 0; width: 60%; font-size: 15px; color: #ffffff; background: #ffffff00; border-bottom: 2px solid #ffffff; padding: 5px 10px; margin-top: 10px; } #login_box button { margin-top: 50px; width: 40%; height: 20px; border-radius: 10px; border: 0; color: #fff; font-size: 15px; background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); cursor: pointer; } #login_box #sign_up { margin-top: 45%; } #login_box #sign_up a { color: #b94648; } </style></head><body> <div id="login_box"> <h2>LOGIN</h2> <div id="form"> <div id="input_box"> <input type="text" placeholder="Username"> </div> <div id="input_box"> <input type="password" placeholder="Password"> </div> </div> <button id="sign_in">Sign in</button> <br> <div id="sign_up"> <a rel="external nofollow" href="javascript:;">忘记密码?</a> </div> </div></body></html>

矮小的钢笔

背景图片资源为：

上面两个代码皆可实现一个简洁的登录页面，代码可直接使用（主要是背景图好看。。。）