HTML CSS靜態登錄

在網站制作中，登錄頁面是網站中必不可少的部分之一。因此，我們需要學會如何用HTML和CSS編寫靜態登錄頁面。

首先，我們需要創建一個HTML文件。在文件中，我們通過“form”和“input”元素來創建登錄表單。

<form action="login.php" method="post">
<label>Username:</label><br>
<input type="text" name="username"><br>
<label>Password:</label><br>
<input type="password" name="password"><br>
<input type="submit" value="Login">
</form>

然后，我們可以通過CSS樣式表美化我們的登錄表單。我們可以添加背景、邊框、顏色等等的樣式。

form {
background-color: #eee;
border: 2px solid #ccc;
padding: 20px;
width: 300px;
margin: 50px auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #008CBA;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}

通過編寫HTML和CSS代碼，我們可以輕松地創建一個簡單而美觀的登錄頁面，以吸引用戶。靜態頁面的效果如下：


當然，在實際網站制作中，靜態頁面只是一個開始。我們需要使用JavaScript等技術來實現整個登錄過程，并處理后端數據。