HTML實例網頁登錄頁面代碼編寫

CSS實例網上的比較少，今天我就來分享一下關於登錄界面的實例吧！大家可以參考哦。

方法

如圖，先編寫一個div，div裏面有一個form表單，包括有兩個輸入框和登錄按鈕。Input中的type的text表示的是文本框，password表示的密碼框。Placeholder表示的輸入框中的默認文字，當我們沒有往輸入框輸入文字就會默認顯示，如果我們往輸入框輸入文字就會自動消失哦。Required表示必須往輸入框輸入內容。

接着我們在style標籤裏面清除所有標籤的margin和padding。這樣元素之間的間距就會消除。

設置div的寬度和高度爲300px，並且上下左右居中，left和top設置爲50%，表示往右移動50%，往下移動50%。

設置input的高度和寬度，邊框爲1px，然後使用margin-top來讓兩個輸入框隔開一定的距離。

同理，設置button的寬度高度和邊框，margin-top也是用來拉開與輸入框的距離，不然會靠在一起，不好看。box-sizing: content-box;用來設置button撐滿整個div,如果不設置的話會溢出div。Border-radius可以用來設置按鈕的圓滑度，比如我設置了10px，四邊的角就會變圓一點。

最後預覽一下效果圖。

登錄界面源代碼如圖所示，可以自己稍加完善。

<!doctype html>

<head>

<title>Document</title>

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>

</form>

</div>

</body>

</html>

開心生活站

HTML實例網頁登錄頁面代碼編寫

學習機什麼牌子好

微博怎麼顯示手機型號，微博如何顯示手機型號

微博如何移動好友分組

微博怎麼取消超話關注

相關文章