用html 有序列表实现密码修改页面 字段为:原始密码,新密码,重复密码,邮件设置。并添加一些合适的css,用js控制css背景样式
时间: 2023-05-15 20:07:40 浏览: 69
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>密码修改页面</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
form {
margin: 50px auto;
width: 500px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="password"] {
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
width: 100%;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>密码修改页面</h2>
<ol>
<li>
<label for="old-password">原始密码:</label>
<input type="password" id="old-password" name="old-password" required>
</li>
<li>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password" required>
</li>
<li>
<label for="repeat-password">重复密码:</label>
<input type="password" id="repeat-password" name="repeat-password" required>
</li>
<li>
<label for="email">邮件设置:</label>
<input type="email" id="email" name="email" required>
</li>
</ol>
<input type="submit" value="提交">
</form>
</body>
</html>
```
这段代码使用了有序列表 `<ol>` 来实现密码修改页面,每个列表项 `<li>` 包含一个 `<label>` 和一个 `<input>`,其中 `<label>` 用于描述输入框的用途,`<input>` 用于接收用户输入。CSS 样式用于美化页面,包括背景色、字体、边框、阴影等。JS 可以用于控制 CSS 样式的背景样式,但这里没有用到。