以下是一个简单的黑白风格的登录界面 HTML 和 CSS 示例。这个示例使用了基础的HTML结构,并通过CSS进行样式设置,以实现黑白效果。
html
body {
background-color: #000; /* 黑色背景 */
color: #fff; /* 白色文字 */
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #111; /* 深灰色登录框 */
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
width: 300px;
text-align: center;
}
.login-container h1 {
margin-bottom: 20px;
}
.login-container input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #fff;
border-radius: 4px;
background-color: #222; /* 输入框背景 */
color: #fff; /* 输入框文字 */
}
.login-container input::placeholder {
color: #aaa; /* 提示文字颜色 */
}
.login-container button {
background-color: #fff; /* 白色按钮 */
color: #000; /* 黑色按钮文字 */
border: none;
padding: 10px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
width: 100%;
}
.login-container button:hover {
background-color: #eaeaea; /* 悬停时按钮颜色变化 */
}
说明
1. HTML结构: 包括一个标题、两个输入框(用户名和密码)和一个登录按钮。
2. CSS样式: 设置了黑色背景、白色文字,以及输入框和按钮的样式。
3. 布局: 使用Flexbox使登录框居中。
你可以将以上代码保存为`.html`文件,通过浏览器打开,以查看黑白风格的登录界面。
查看详情
查看详情