代码解释
HTML 部分：
创建了一个简单的表单，包含姓名、邮箱和留言三个输入项，以及一个提交按钮。
使用了不同的 input 类型（text 和 email）和 textarea 来实现不同的输入需求。
CSS 部分：
整体表单样式：设置了表单的宽度、外边距、内边距、背景颜色、边框圆角和阴影，使表单看起来更加美观。
标签样式：将标签设置为块级元素，添加了下外边距、加粗字体和颜色。
输入框和文本域样式：设置了宽度、内边距、边框、边框圆角和过渡效果，使输入框和文本域看起来更加整洁。
输入框和文本域聚焦时样式：当输入框或文本域获得焦点时，改变边框颜色，提醒用户当前正在操作的输入项。
提交按钮样式：设置了背景颜色、文字颜色、内边距、边框和边框圆角，使按钮看起来更加突出。
提交按钮悬停时样式：当鼠标悬停在提交按钮上时，改变背景颜色，增加交互效果。
通过以上代码，你可以创建一个美观的表单框架，包含多项输入框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化表单</title>
<style>
/* 整体表单样式 */
form {
width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 标签样式 */
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
/* 输入框和文本域样式 */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
/* 输入框和文本域聚焦时样式 */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #007BFF;
outline: none;
}
/* 提交按钮样式 */
input[type="submit"] {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 提交按钮悬停时样式 */
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form action="#">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入你的姓名">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入你的邮箱">
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" placeholder="请输入你的留言"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
发表评论