前端：登录界面
今天是暑期實(shí)習(xí)第二天，閑著沒事做了個(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>登錄</title><!-- 添加內(nèi)部樣式begin --><style>form {border: 1px #ccc solid;border-radius: 8px;box-shadow: 2px 3px 20px #ccc;width: 260px;margin: auto;/* 當(dāng)寬度固定可居中 */padding: 0 20px;}.row{border: 0px red solid;margin-bottom: 15px;}.btn,h3{margin: 30px 0;}/* 屬性選擇器 */input[type='submit']{width: 100%;background-color: blue;color: white;border: 0;padding: 5px 0;border-radius: 20px;}label{width: 66px;display: inline-block;/* 內(nèi)連塊元素，寬度一定 */text-align: right;}.txt{padding: 5px;border: solid 1px #ccc;border-radius: 5px;}</style><!-- 添加內(nèi)部樣式end --><!-- 添加外部樣式end --><!-- <link rel="stylesheet" href="css/style.css">--><!-- 添加外部樣式end --> </head><body><form action=""><h3>用戶登錄：</h3><!-- 表單控件 --><!-- 布局元素div --><div class="row"><!-- label內(nèi)聯(lián)元素，寬度自動(dòng) --><label for="name">用戶名：</label><input class="txt" type="text" id="name" name="name" placeholder="請(qǐng)輸入用戶名"></div><div class="row"><label for="pass">密碼：</label> <input class="txt" type="password" id="pass" name="pass" placeholder="請(qǐng)輸入密碼"></div><div class="row btn" ><input type="submit" value="登錄"></div></form> </body> </html>最終效果：
注：本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處
總結(jié)
- 上一篇： 文本文件与二进制文件区别
- 下一篇： 2020 macbook pro 16寸