使用绝对定位,实现注册和登录界面。性别选项为男女,专业选项,爱好选项跳舞 阅读和唱歌
时间: 2023-10-04 20:12:14 浏览: 37
这里提供一个简单的实现方式,仅供参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>注册/登录</title>
<style type="text/css">
body {
background-color: #f5f5f5;
}
.form-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.form-wrap h2 {
margin-top: 0;
}
.form-wrap label {
display: block;
margin-bottom: 10px;
}
.form-wrap input[type="text"], .form-wrap input[type="password"], .form-wrap select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px;
box-sizing: border-box;
}
.form-wrap select {
height: 40px;
}
.form-wrap input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.form-wrap input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="form-wrap">
<h2>注册/登录</h2>
<form action="#" method="post">
<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="gender">性别</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="major">专业</label>
<input type="text" id="major" name="major">
<label for="hobby">爱好</label>
<input type="checkbox" id="hobby_dance" name="hobby[]" value="dance">
<label for="hobby_dance">跳舞</label>
<input type="checkbox" id="hobby_reading" name="hobby[]" value="reading">
<label for="hobby_reading">阅读</label>
<input type="checkbox" id="hobby_singing" name="hobby[]" value="singing">
<label for="hobby_singing">唱歌</label>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
```
CSS代码中使用了绝对定位,将表单包裹在一个 `.form-wrap` 的 DIV 中,并设置了 top、left 和 transform 属性来使其在页面中垂直和水平居中。其他样式主要是对表单元素的设置。
注意,这里使用了 checkbox 来实现爱好选项。选中的值会以数组的形式提交到服务器端。