用html css js制作一个可自适应的登录页面 分为左右两部分 左边是视频 右边是登录页面 当屏幕到一定宽度之后左侧视频隐藏 右侧登录页面居中显示
时间: 2024-05-10 10:19:28 浏览: 6
好的,以下是一个简单的实现:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">
<video src="video.mp4" autoplay muted loop></video>
</div>
<div class="right">
<h2>Login</h2>
<form>
<label for="username">Username</label>
<input type="text" id="username">
<label for="password">Password</label>
<input type="password" id="password">
<button type="submit">Login</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.left {
flex: 1;
position: relative;
}
.left video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
h2 {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 5px;
}
input {
padding: 5px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
}
button {
padding: 10px;
background-color: #0077cc;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.left {
display: none;
}
.right {
flex-basis: 100%;
}
}
```
JavaScript代码:
```javascript
// 可选,用于在视频加载完成后隐藏loading动画
const video = document.querySelector('video');
video.addEventListener('loadeddata', () => {
document.querySelector('.loading').style.display = 'none';
});
```
在上述代码中,我们使用了flex布局来实现左右两部分的分布,并使用了媒体查询来控制在窗口宽度小于768px时左侧视频隐藏,右侧登录页面居中显示。此外,我们还使用了HTML5的视频标签来实现左侧的视频播放。