效果演示
实现了一个滚动导航栏，包括一个固定在页面顶部的导航栏和四个全屏高度的区块。导航栏的背景颜色为半透明黑色，高度为60px，导航链接为白色，字体大小为30px，链接之间有15px的间距。当鼠标悬停在链接上时，下划线会出现。四个区块的背景颜色分别为#95e1d3、#eaffd0、#fce38a和#f38181，字体大小为150px，内容居中显示。此外，还使用了scroll-behavior属性，使得页面滚动时具有平滑滚动的效果。
Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动导航栏</title>
<link rel="stylesheet" href="./">
</head>
<body>
<nav>
<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>
<a href="#d">D</a>
</nav>
<div class="container">
<div class="item" id="a">A</div>
<div class="item" id="b">B</div>
<div class="item" id="c">C</div>
<div class="item" id="d">D</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
nav{
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 60px;
line-height: 60px;
position: fixed;
text-align: center;
}
nav a{
color: #fff;
font-size: 30px;
margin: 0 15px;
text-decoration: none;
}
nav a:hover{
text-decoration: underline;
}
.container div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 150px;
}
.container div:nth-child(1){
background-color: #95e1d3;
}
.container div:nth-child(2){
background-color: #eaffd0;
}
.container div:nth-child(3){
background-color: #fce38a;
}
.container div:nth-child(4){
background-color: #f38181;
}
实现思路拆分
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
这段代码设置了所有元素的外边距和内边距为0，并且使用了平滑滚动的效果。
nav{
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 60px;
line-height: 60px;
position: fixed;
text-align: center;
}
这段代码设置了导航栏的背景颜色为半透明黑色，宽度为100%，高度为60px，行高为60px，固定在页面顶部，文本居中对齐。
nav a{
color: #fff;
font-size: 30px;
margin: 0 15px;
text-decoration: none;
}
这段代码设置了导航链接的颜色为白色，字体大小为30px，链接之间有15px的间距，去除了下划线。
nav a:hover{
text-decoration: underline;
}
这段代码设置了当鼠标悬停在链接上时，下划线会出现。
.container div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 150px;
}
这段代码设置了四个区块的高度为100vh，使用flex布局使其内容居中对齐，字体大小为150px。
.container div:nth-child(1){
background-color: #95e1d3;
}
.container div:nth-child(2){
background-color: #eaffd0;
}
.container div:nth-child(3){
background-color: #fce38a;
}
.container div:nth-child(4){
background-color: #f38181;
}
这段代码设置了四个区块的背景颜色分别为#95e1d3、#eaffd0、#fce38a和#f38181。
