1. html 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- pag 1 -->
<section id="page-1" class="page">
<h1>欢迎来到铄洋在线</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe perspiciatis, necessitatibus quia quasi consectetur impedit sapiente. Nisi eaque tempore ratione reiciendis et harum? Quisquam blanditiis, hic totam aut necessitatibus error fuga perferendis aliquid eius quas exercitationem quaerat quae illum laborum!</p>
<div>
<a href="#page-2" class="btn">下一页
<i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- pag 2 -->
<section id="page-2" class="page">
<h1>第二页</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe perspiciatis, necessitatibus quia quasi consectetur impedit sapiente. Nisi eaque tempore ratione reiciendis et harum? Quisquam blanditiis, hic totam aut necessitatibus error fuga perferendis aliquid eius quas exercitationem quaerat quae illum laborum!</p>
<div>
<a href="#page-1" class="btn">上一页
<i class="fas fa-arrow-circle-up"></i>
</a>
<a href="#page-3" class="btn">下一页
<i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- pag 3 -->
<section id="page-3" class="page">
<h1>第三页</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe perspiciatis, necessitatibus quia quasi consectetur impedit sapiente. Nisi eaque tempore ratione reiciendis et harum? Quisquam blanditiis, hic totam aut necessitatibus error fuga perferendis aliquid eius quas exercitationem quaerat quae illum laborum!</p>
<div>
<a href="#page-2" class="btn btn-dark">上一页
<i class="fas fa-arrow-circle-up"></i>
</a>
<a href="#page-4" class="btn">下一页
<i class="fas fa-arrow-circle-down"></i>
</a>
</div>
</section>
<!-- pag 4 -->
<section id="page-4" class="page">
<h1>第四页</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe perspiciatis, necessitatibus quia quasi consectetur impedit sapiente. Nisi eaque tempore ratione reiciendis et harum? Quisquam blanditiis, hic totam aut necessitatibus error fuga perferendis aliquid eius quas exercitationem quaerat quae illum laborum!</p>
<div>
<a href="#page-3" class="btn">上一页
<i class="fas fa-arrow-circle-up"></i>
</a>
</div>
</section>
</body>
</html>
2. css 样式
:root {
--page-1-color: steelblue;
--page-2-color: tan;
--page-3-color: teal;
--page-4-color: tomato;
--animate-speed: 1s;
}
.html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
}
/* page colors */
#page-1 {
background: var(--page-1-color);
}
#page-2 {
background: var(--page-2-color);
}
#page-3 {
background: var(--page-3-color);
}
#page-4 {
background: var(--page-4-color);
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
}
.page h1 {
font-size: 4rem;
line-height: 1.2;
margin: 1rem;
}
.page p {
font-size: 1.3rem;
}
.btn {
display: inline-block;
text-decoration: none;
border: none;
padding: 1rem 2rem;
background-color: #f4f4f4;
margin-top: 1rem;
font-size: 1.1rem;
color: #333;
transition: all 0.3s ease-in;
}
.btn:hover,
.btn-dark {
background: #333;
color: #fff;
}
.btn-dark:hover {
background-color: #f4f4f4;
color: #333;
}
