妙知谷HTML實例?網頁登錄頁面代碼編寫
- IT技術
- 關注：1.91W次
操作方法
（01）如圖所示，先編寫一個div，div裏面有一個form表單，包括有兩個輸入框和登錄按鈕。Input中的type的text表示的是文本框，password表示的密碼框。Placeholder表示的輸入框中的默認文字，當我們沒有往輸入框輸入文字就會默認顯示，如果我們往輸入框輸入文字就會自動消失。Required表示必須往輸入框輸入內容。
（02）接着我們在style標籤裏面清除所有標籤的margin和padding，這樣元素之間的間距就會消除。
（03）設置div的寬度和高度為300px，並且上下左右居中，left和top設置為50%，表示往右移動50%，往下移動50%。
（04）設置input的高度和寬度，邊框為1px，然後使用margin-top來讓兩個輸入框隔開一定的距離。
（05）同理，設置button的寬度高度和邊框，margin-top也是用來拉開與輸入框的距離，不然會靠在一起，不美觀。box-sizing: content-box;用來設置button撐滿整個div,如果不設置的話會溢出div。Border-radius可以用來設置按鈕的圓滑度，比如我設置了10px，四邊的角就會變圓一點。
（06）最後預覽一下效果圖。
（07）登錄界面源代碼如圖所示，可以自己稍加完善。<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}div{position: absolute; top: 50%; left:50%; margin: -150px 0 0 -150px; width: 300px; height: 300px; }input{width:298px;height: 30px;border: 1px solid black;margin-top: 30px;}button{width:298px;height: 30px;border: 1px solid black;margin-top: 30px;box-sizing: content-box;border-radius: 10px;}</style></head><body><div><form><input type="text" required="required" placeholder="用户名"/><input type="password" required="required" placeholder="密碼"/><button type="submit">登錄</button></form></div></body></html>
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/itjishu/8me9gl.html
