1),我按照W3schools的sticky navbar header教程进行了操作,并尝试在演示网站的首页上对其进行幻灯片播放。 (对于幻灯片,我还遵循了W3schools tutorial。)
我注意到,每当向下滚动查看内容时,幻灯片放映总是会重叠并位于粘性导航栏标题的顶部。
2)另外,如何将链接置于粘性标题中?我尝试做left: 35%; position: relative;
使其居中一些,但它没有完全居中。 (该代码在CSS部分的#navbar a
下进行了注释。)
谢谢您的帮助!
我的代码:
/* Navbar */
.logo {
height: 10%;
width: 15%;
display: block;
margin-left: auto;
margin-right: auto;
}
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
margin-left: auto;
margin-right: auto;
color: gold;
font-family: "League Spartan";
text-transform: uppercase;
float: left;
display: block;
padding: 2rem;
/* left: 35%;
position: relative; */
}
#navbar a:hover {
color: black;
background-color: #ddd;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
/* Slideshow */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.text {
color: #f2f2f2;
font-family: "League Spartan";
font-size: 15px;
text-transform: uppercase;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-family: "League Spartan";
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
<!-- Navbar -->
<nav>
<div id="navbar">
<a href="#about-us">About Us</a>
<a href="#prices">Prices</a>
<a href="#now-showing">Now Showing</a>
</div>
</nav>
<!-- Slideshow -->
<br>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="../../media/people-at-the-cinema.jpg" style="width: 100%">
<div class="text">We Have Renovated!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="../../media/playmobil-poster.jpg" style="width: 100%">
<div class="text">In Cinemas August 9</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="../../media/frozen-2-poster.jpg" style="width: 100%">
<div class="text">In Cinemas November 22</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
答案 0 :(得分:1)
欢迎您!
将 第一个问题的答案设置为标题z-index
的{{1}}的{{1}}到滑块上方。
第二个问题的答案,删除父标签9000
上的锚标签标签集nav
而不是float
的{{1}}
这是一个片段
inline-block
block