用html 有序列表实现密码修改页面 字段为:原始密码,新密码,重复密码,邮件设置。并添加一些合适的css背景样式,用JavaScript控制css背景样式
时间: 2023-05-15 10:07:41 浏览: 53
可以使用以下HTML代码实现密码修改页面的有序列表:
<ol>
<li>
<label for="old-password">原始密码:</label>
<input type="password" id="old-password" name="old-password">
</li>
<li>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password">
</li>
<li>
<label for="repeat-password">重复密码:</label>
<input type="password" id="repeat-password" name="repeat-password">
</li>
<li>
<label for="email">邮件设置:</label>
<input type="email" id="email" name="email">
</li>
</ol>
为了添加合适的CSS背景样式,可以使用以下CSS代码:
ol {
background-color: #f2f2f2;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
li {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
font-weight: bold;
}
input[type="password"], input[type="email"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="password"]:focus, input[type="email"]:focus {
border-color: #007bff;
box-shadow: 0 0 5px #007bff;
}
最后,可以使用JavaScript代码控制CSS背景样式的变化,例如:
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('focus', function() {
this.style.borderColor = '#007bff';
this.style.boxShadow = '0 0 5px #007bff';
});
inputs[i].addEventListener('blur', function() {
this.style.borderColor = '#ccc';
this.style.boxShadow = 'none';
});
}