css忘记密码页面怎么写 |html 内置 css

/* 首先，大家要为忘记密码页面创建一个容器 */
.forget-password-container {
text-align: center; /* 居中显示 */
padding-top: 50px; /* 向上留出一定的距离 */
}
/* 接着，大家可以添加一张背景图片来美化界面 */
.forget-password-container {
background-image: url('password_bg.jpg'); /* 背景图片位置 */
background-size: cover; /* 背景图片大小 */
background-position: center; /* 背景图片位置 */
}
/* 接下来，大家可以添加一些表单元素来收集用户的信息 */
.forget-password-form {
width: 400px; /* 表单宽度 */
margin: 0 auto; /* 居中显示 */
background-color: #f1f1f1; /* 背景颜色 */
border-radius: 5px; /* 圆角边框 */
padding: 30px; /* 内边距 */
box-shadow: 0 0 10px #999999; /* 阴影边框 */
}
/* 为表单元素添加一些样式 */
.forget-password-form input[type="text"],
.forget-password-form input[type="email"] {
width: 100%; /* 输入框宽度 */
padding: 12px 20px; /* 内部填充 */
margin: 8px 0; /* 外部间隙 */
box-sizing: border-box; /* 盒模型 */
border: 2px solid #ccc; /* 边框 */
border-radius: 4px; /* 圆角边框 */
}
/* 最后，大家可以添加一个按钮来提交表单 */
.forget-password-form input[type="submit"] {
width: 100%; /* 按钮宽度 */
background-color: #4CAF50; /* 背景颜色 */
color: white; /* 字体颜色 */
padding: 14px 20px; /* 内部填充 */
margin: 8px 0; /* 外部间隙 */
border: none; /* 边框 */
border-radius: 4px; /* 圆角边框 */
cursor: pointer; /* 鼠标悬停 */
}

通过上述代码，大家可以创建一个美观、实用的忘记密码页面。大家可以通过该页面中的表单元素收集用户的信息，并在用户提交表单后将该信息发送到后端进行处理。同时，大家也可以使用css的样式来美化该页面，提高用户体验。