今天我們來分享一下HTML登陸頁面的源代碼網(wǎng)站，下面就讓我們一起來看看吧！
該網(wǎng)站的代碼如下：
<!DOCTYPE html> <html> <head> <title>登陸頁面</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入樣式 --> <link rel="stylesheet" href="login.css"> </head> <body> <div class="container"> <h1>登陸頁面</h1> <form action="#" method="POST"> <label for="username">用戶名</label> <input type="text" id="username" name="username" placeholder="請輸入用戶名"> <label for="password">密碼</label> <input type="password" id="password" name="password" placeholder="請輸入密碼"> <input type="submit" value="登陸"> </form> </div> </body> </html>上面的代碼分為頭部、主體和底部三個部分。頭部包括了網(wǎng)站的標(biāo)題、字符集和樣式文件的引入；主體是一個登陸框，包含了用戶名、密碼的輸入框以及一個登陸按鈕；底部包括了HTML的結(jié)束標(biāo)簽。 注意，上面的代碼中給出了一個login.css文件，該文件包含了樣式代碼。下面是login.css的代碼：
.container {
width: 50%;
margin: 0 auto;
text-align: center;
padding: 50px;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
}
label {
font-size: 18px;
display: inline-block;
margin-bottom: 10px;
text-align: left;
width: 100%;
}
input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
}該樣式文件中包括了整個網(wǎng)站的樣式代碼。我們可以看到，容器的寬度為50%，居中顯示，邊框和圓角都是5個像素。H1標(biāo)簽的字號是36像素，用戶名和密碼的label標(biāo)簽都是18像素，并且給一個底部的10像素邊距。input標(biāo)簽是一個完整的100%寬輸入框，給20像素的底部邊距，以及5個像素的圓角和邊框。登陸按鈕上使用了4CAF50這個背景顏色。
至此，本文介紹了HTML登陸頁面的源碼和樣式表代碼，希望對你有所幫助！