利用html,css,js制作分割页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>分割界面</title>
<link rel="stylesheet" href="./分割界面.css" />
</head>
<body>
<div class="container">
<div class="split left">
<!-- <img src="../imgs/pexels-photo-3551207.jpg" alt="" class="left" /> -->
<h1>秋天</h1>
<a href="#" class="button">秋天</a>
</div>
<div class="split right">
<!-- <img src="../imgs/pexels-photo-3568792.jpg" alt="" class="left" /> -->
<h1>夏天</h1>
<a href="#" class="button">夏天</a>
</div>
</div>
<script src="./分割界面.js"></script>
</body>
</html>
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.2);
--left-button-hover-color: rgba(161, 11, 11, 0.3);
--right-bg-color: rgba(43, 43, 43, 0.2);
--hover-width: 75%;
--other-width: 25%;
--speed: 1000ms;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 20%;