CSS（Cascading Style Sheets）是一種用于網(wǎng)頁表現(xiàn)的樣式語言，它可以使網(wǎng)頁設(shè)計(jì)更為美觀、直觀和易于維護(hù)。在網(wǎng)頁實(shí)現(xiàn)中，表單是和用戶打交道最密切的部分。在這篇文章中，我們將會(huì)探究如何使用CSS美化表單，以及展示一個(gè)帶有個(gè)人信息的表單。

<!-- HTML代碼 -->
<form action="/" method="POST">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡:</label>
<input type="number" min="0" max="150" id="age" name="age"><br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email"><br>
<button type="submit">提交</button>
</form>

代碼中的表單包括姓名、年齡和郵箱三個(gè)字段，以及一個(gè)提交按鈕。現(xiàn)在，我們來為它添加一些CSS樣式，讓它變得更美觀。

<!-- CSS代碼 -->
form {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}
label {
display: block;
margin: 10px 0;
font-size: 18px;
}
input[type="text"],
input[type="number"],
input[type="email"] {
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
width: 100%;
font-size: 16px;
margin-bottom: 20px;
}
button[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}

CSS樣式主要是針對(duì)表單元素進(jìn)行的。我們使用了flex布局和居中對(duì)齊，使表單更好看。每個(gè)表單字段都有一個(gè)標(biāo)簽和相應(yīng)的輸入框，并添加了底部邊框，而且樣式的布局、字體、大小等都進(jìn)行了相應(yīng)調(diào)整，以便頁面更協(xié)調(diào)。此外，提交按鈕被設(shè)置為藍(lán)底白字的樣式，并在鼠標(biāo)放置在按鈕上時(shí)改變顏色以增加一些額外效果。

這是我們使用CSS美化后表單的效果展示。