HTML實例?網頁登錄頁面代碼編寫
操作方式
-
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> - End
- 發表于 2019-08-08 20:40
- 閱讀 ( 707 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章