JQ的登录界面实现图片
时间: 2024-03-01 17:52:47 浏览: 21
要实现一个带有图片的 JQ 登录界面,可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的实现示例:
HTML 代码:
```
<div class="login-container">
<div class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</div>
<div class="login-image">
<img src="your-image-url" alt="Login Image">
</div>
</div>
```
CSS 代码:
```
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
padding: 50px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.login-form h2 {
margin-bottom: 20px;
}
.login-form input, .login-form button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
}
.login-form button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.login-image {
margin-left: 50px;
}
.login-image img {
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 5px;
}
```
JavaScript 代码:
```
// 可以在这里添加登录逻辑代码
```
你需要将 HTML 代码中的 `your-image-url` 替换为你自己的图片 URL。你也可以调整 CSS 代码中的样式来适应你的需求。