设计一个网站用户登录界面 用户登录界面的编写 划定一个盒子,用来装载登录界面基本信息,如:用户名、密码等,要求如下: 1、高度:250px; 2、宽度:450px; 3、内边距:10px; 4、边框线:宽度1px, 实线,黑色; 5、边框圆角值为:8px 6、盒子在页面居中显示。 7、盒子底纹为浅灰色;
时间: 2023-12-28 20:22:05 浏览: 18
以下是一个基本的用户登录界面的HTML和CSS代码,满足您的要求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
/* 盒子样式 */
.login-box {
width: 450px;
height: 250px;
padding: 10px;
border: 1px solid black;
border-radius: 8px;
background-color: #f2f2f2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 输入框样式 */
input[type=text], input[type=password] {
width: 100%;
padding: 8px;
margin: 8px 0;
border: none;
border-radius: 8px;
background-color: #ddd;
box-sizing: border-box;
}
/* 按钮样式 */
.login-btn {
width: 305px;
height: 40px;
border: none;
border-radius: 8px;
background-color: green;
color: white;
font-size: 25px;
margin-top: 15px;
}
/* 忘记密码链接样式 */
.forgot-password {
color: gray;
font-size: 12px;
text-decoration: none;
margin-left: 10px;
}
.forgot-password:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-box">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button class="login-btn">登录</button>
<a href="#" class="forgot-password">忘记密码</a>
</div>
</body>
</html>
```
您可以复制以上代码,将其保存为一个HTML文件,并在浏览器中打开,即可看到一个简单的用户登录界面。需要注意的是,以上代码只是一个基本的示例,您可以根据自己的需求进行修改和调整。同时,由于安全性等因素,实际的用户登录界面需要进行更加严格的验证和保护措施。