由於每個部分的位置已經設置為relative，意味著將relative定位到上一節，因此可以將其他部分設置為left: 0 。
* {
margin: 0;
}
#all-sections{
display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
height:100vh;
position: relative;
left: 0
display:block;
width:100vw;
}
.main{
background-color:white;
}
.about{
background-color:red;
}
.professional{
background-color:purple;
}
.fun-stuff{
background-color:black;
}
.blog{
background-color:blue;
}
.contact{
background-color:rgb(1, 235, 21);
}
About
Professional
Fun Stuff
Blog
Contact
如果希望導航欄始終可見，可以將該元素設置為position: fixed，它不會在滾動時移動。
#menu-list {
position: fixed;
z-index: 9999;
}
* {
margin: 0;
}
#all-sections{
display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
height:100vh;
position: relative;
left: 0
display:block;
width:100vw;
}
.main{
background-color:white;
}
.about{
background-color:red;
}
.professional{
background-color:purple;
}
.fun-stuff{
background-color:black;
}
.blog{
background-color:blue;
}
.contact{
background-color:rgb(1, 235, 21);
}
About
Professional
Fun Stuff
Blog
Contact
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
