HTML 实现一个简单而精美的登录界面
生活随笔
收集整理的這篇文章主要介紹了
HTML 实现一个简单而精美的登录界面
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖
代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./login.css" /></head><body><div class="container"><div class="loginForm"><div class="formHeader"><div class="logo"><img src="./img/logo.png" alt="" /></div><div class="comName"><h3>WHH</h3><p>找到屬于你的哇哈哈飲料</p></div></div><div class="formTitle">登錄你的賬戶</div><form action=""><div class="items"><label class="itemsTitle"><strong>Email</strong></label><inputtype="email"class="form-control"value="hello@example.com"/></div><div class="items"><label class="itemsTitle"><strong>Password</strong></label><input type="password" class="form-control" value="123456" /></div><div class="form-check"><div><input type="checkbox" id="basic_checkbox_1" /><label class="form-check-label" for="basic_checkbox_1">記住我</label></div><div class="forgetPwd"><a href="#">忘記密碼?</a></div></div><div class="form-submit"><button type="submit">登 錄</button></div></form><div class="new-account"><p>還沒(méi)有賬號(hào)?<a href="#">點(diǎn)擊注冊(cè)</a></p></div></div></div></body> </html> body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box; } h3, p {margin: 0;padding: 0; } .container {background: #f8e5e0;height: 100vh;width: 100%;display: flex;justify-content: center;align-items: center;box-sizing: border-box; } .container .loginForm {width: 30%;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;height: 60%;background: #fff;border-radius: 10px;padding: 3.125rem; } .container .loginForm .formHeader {display: flex;justify-content: center;margin-bottom: 10px; } .container .loginForm .formHeader .comName {display: flex;flex-direction: column;justify-content: space-evenly;margin-left: 15px; } .container .loginForm .formHeader .comName h3 {font-size: 36px;font-weight: 600;vertical-align: top;color: rgb(70, 66, 66);font-family: 'Georgia', Tahoma, Sans-Serif; } .container .loginForm .formHeader .comName p {color: rgb(61, 51, 51); } .container .loginForm .formTitle {text-align: center;font-size: 24px;letter-spacing: 10px;text-indent: 10px;font-weight: 800;margin-bottom: 20px; } .container .loginForm form .items {margin-bottom: 25px; } .container .loginForm form .items .itemsTitle {margin-bottom: 10px;font-family: 'poppins', sans-serif;color: #393939; } .container .loginForm form .items .form-control {box-sizing: border-box;display: block;width: 100%;padding: 0.3125rem 1.25rem;font-size: 1.375rem;font-weight: 400;line-height: 1.5;color: #393939;background-color: #fff;background-clip: padding-box;border: 1px solid #f5f5f5;appearance: none;border-radius: 1rem;height: 3.5rem;transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .container .loginForm form .form-check {margin-bottom: 40px;display: flex;justify-content: space-between; } .container .loginForm form .form-check .form-check-label {color: #292424;font-weight: 600; } .container .loginForm form .form-check .forgetPwd a {text-decoration: none;color: #898282; } .container .loginForm form .form-submit {margin-bottom: 15px; } .container .loginForm form .form-submit button {outline: 0;border: none;width: 100%;background-color: #f93a0b;padding: 0.938rem 1.5rem;border-radius: 1.125rem;font-weight: 400;font-size: 1.4rem;color: #fff;font-weight: 700;cursor: pointer; } .container .loginForm .new-account {color: #898282; } .container .loginForm .new-account a {text-decoration: none;color: #c72e09; }總結(jié)
以上是生活随笔為你收集整理的HTML 实现一个简单而精美的登录界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 快速实现主流PLC数据采集并用MQTT协
- 下一篇： html重置按钮代码用法,HTML In