CSS中表單的設(shè)計(jì)相信對(duì)于許多前端工程師來說不會(huì)是一件難事，下面我們來一步步學(xué)習(xí)如何打出CSS中表單的代碼。 首先，在HTML文件中創(chuàng)建一個(gè)表單，結(jié)構(gòu)如下：

<form>
<label>用戶名：</label>
<input type="text" name="username" />
<label>密碼：</label>
<input type="password" name="password" />
<input type="submit" value="提交" />
</form>

在這個(gè)例子中，我們創(chuàng)建了一個(gè)表單，里面包含了一個(gè)用戶名輸入框、一個(gè)密碼輸入框和一個(gè)提交按鈕。 接下來是用CSS來設(shè)計(jì)這個(gè)表單。我們需要為表單中的每個(gè)元素設(shè)置樣式，比如設(shè)置文本框的寬度、高度和邊框等。 下面是一段示例代碼：

form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}

這段代碼中，我們?yōu)楸韱卧O(shè)置了寬度和居中對(duì)齊的樣式，為label設(shè)置了字體大小、粗細(xì)和底部的間距。對(duì)于文本框，我們?cè)O(shè)置了寬度、內(nèi)邊距、邊框、圓角和底部的間距。對(duì)于提交按鈕，我們?cè)O(shè)置了背景顏色、字體顏色、內(nèi)邊距、邊框、圓角、光標(biāo)和字體大小。 這些CSS樣式讓表單更美觀、易于使用。在實(shí)際項(xiàng)目中，我們可以根據(jù)具體要求添加更多的CSS樣式，讓表單更加個(gè)性化、好看。