帮我写一个网页表单居中,表单里有用户名,密码,用户权限,还有登录跟取消按钮的html代码
时间: 2024-03-26 18:36:19 浏览: 19
好的,以下是一个简单的网页表单,包括用户名、密码、用户权限、登录和取消按钮,居中显示:
```html
<!DOCTYPE html>
<html>
<head>
<title>居中表单</title>
<style>
form {
margin: auto;
width: 50%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
}
input[type="text"], input[type="password"], select {
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"], input[type="reset"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="permission">用户权限:</label>
<select id="permission" name="permission">
<option value="guest">访客</option>
<option value="user">普通用户</option>
<option value="admin">管理员</option>
</select>
<input type="submit" value="登录">
<input type="reset" value="取消">
</form>
</body>
</html>
```
其中,`margin: auto` 和 `width: 50%` 属性将表单居中显示,`text-align: center` 属性将表单内的元素居中对齐。`padding`、`border` 和 `border-radius` 属性用于设置表单的样式,`box-sizing: border-box` 属性用于保证输入框的宽度包括边框和内边距。`input[type="submit"]` 和 `input[type="reset"]` 元素用于创建登录和取消按钮,`cursor: pointer` 属性将鼠标指针变为手型。