创建一个精美的表单（form）需要使用HTML和CSS，以下是一个简单的示例，展示如何使用CSS来美化一个表单。
HTML:
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">提交</button>
</form>
CSS:
/* 去除表单内元素的默认样式 */
form, form * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 表单容器样式 */
form {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
}
/* 表单标签样式 */
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
/* 表单输入框样式 */
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 提交按钮样式 */
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007BFF; /* 蓝色背景 */
color: white; /* 白色文本 */
border: none; /* 无边框 */
border-radius: 4px; /* 圆角 */
cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
这个示例展示了如何使用CSS来美化一个简单的表单，你可以根据需要调整样式，例如更改颜色、字体、边距等，以适应你的设计要求。
