在網頁設計中,登錄表單是一個必要的元素。CSS技術可以幫助我們設計美觀、實用的登錄表單。下面就是一個完整的CSS登錄表單代碼。
<form action="#" method="post">
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">登錄</button>
</div>
</form>
<style>
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
outline: none;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
這是一個簡單的登錄表單,包括用戶名、密碼和登錄按鈕。整個表單由form標簽包裹。每個輸入項都在一個div標簽(class="form-group")中,并有一個相應的label標簽。輸入框包括type、id、name和required屬性。提交按鈕使用了button標簽。
在CSS中,我們設置了輸入框(input)的樣式,包括填充、邊框、圓角和寬度。提交按鈕使用了簡單的背景顏色和樣式。當鼠標懸停在按鈕上時,背景顏色會稍微變深。
本文提供的CSS代碼和HTML代碼,可以幫助網頁設計者快速構建簡單而實用的登錄表單,而不會占用過多的頁面空間。
下一篇mySQL屬于啥