今天我們來講一下表單CSS設計。表單在網頁中的作用很重要，可以收集網站的訪問者和用戶的信息，是很多網站必不可少的一個要素。 我們先來看一下HTML中的表單代碼：

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

在這個表單中，我們有兩個輸入框和一個提交按鈕。現在我們來給它加點樣式，讓它看起來更加美觀。 第一步，我們需要給表單設置一些基本樣式：

form {
width: 300px;
margin: 0 auto;
}

這段代碼設置了表單的寬度和居中對齊。 接下來，我們給表單中的輸入框和提交按鈕加上一些樣式：

input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #0062cc;
}

這段代碼給輸入框和提交按鈕加上了樣式，包括寬度、內邊距、邊框、圓角、盒模型、外邊距等等。 最后，我們還可以調整輸入框和提交按鈕的字體：

input[type="text"],
input[type="password"],
input[type="submit"] {
font-size: 16px;
font-family: '微軟雅黑', sans-serif;
}

這段代碼設置了字體和字號。 總的來說，表單CSS設計可以讓表單的外觀更加美觀和易于使用，提高用戶體驗。當然，在實際開發中，還需要根據具體需求進行樣式的修改和優化。