表单需要(24): 整个表单在页面中水平居中对齐 有表单标题,且标题需要具有背景色 表单标题和表单对齐 表单项名称和表单项内容不在同一行 表单具有边框 表单内容和表单边框之间上下左右需要有空隙 提交按钮右对齐 提交按钮需要具有背景色,且鼠标悬停时显示手型光标
时间: 2024-05-04 22:18:48 浏览: 167
用JS控制表格的逐行变色的表单
下面是一个满足要求的表单示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
<style>
/* 居中对齐 */
form {
margin: 0 auto;
text-align: center;
}
/* 表单标题样式 */
h2 {
background-color: #ccc;
padding: 10px;
margin-top: 0;
display: inline-block;
}
/* 表单项样式 */
label {
display: block;
margin-bottom: 10px;
}
input[type=text],
input[type=password] {
padding: 5px;
border: 1px solid #ccc;
margin: 0 0 10px;
width: 200px;
box-sizing: border-box;
}
/* 表单边框样式 */
fieldset {
border: 1px solid #ccc;
padding: 20px;
margin: 20px 0;
}
/* 提交按钮样式 */
input[type=submit] {
background-color: #f00;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #c00;
}
</style>
</head>
<body>
<form>
<h2>用户登录</h2>
<fieldset>
<label>
用户名:
<input type="text" name="username">
</label>
<label>
密码:
<input type="password" name="password">
</label>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
```
说明:
- 通过 `margin: 0 auto;` 和 `text-align: center;` 让表单在页面中水平居中对齐。
- 用 `background-color` 和 `padding` 设置表单标题的背景色和内边距。
- 用 `display: inline-block;` 让表单标题和表单项在同一行并对齐。
- 用 `display: block;` 让表单项名称和表单项内容不在同一行。
- 用 `border` 设置表单边框样式。
- 用 `padding` 设置表单内容和表单边框之间的间距。
- 用 `float: right;` 让提交按钮右对齐。
- 用 `background-color` 和 `cursor: pointer;` 设置提交按钮的背景色和鼠标悬停时的光标样式。
阅读全文