我已经使用div标签在section标签内创建了幻灯片放映。我尝试在幻灯片上方添加文本主体，因此在幻灯片的div标签上方添加了另一个div标签，但是它起作用了，但是，当我添加文本时，它将幻灯片中的图像向下推，从而切断了幻灯片中的图像。有针对这个的解决方法吗？谢谢
<!DOCTYPE html>
<html>
<head>
<title> AnimeExpoBd </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li class="logo"><a href="index.html">ANIME EXPO LOGO</a></li>
<li class="navbar"><a href="index.html">HOME</a></li>
<li class="navbar"><a href=#gotoaboutus>ABOUT US</a></li>
<li class="navbar"><a href="moreaboutus.html">SCHEDULE</a></li>
<li class="navbar"><a href="contactus.html">CONTACT US</a></li>
</ul>
</header>
<section class="feature-box opening">
<div id="gotoaboutus" class="about-us"><strong>ABOUT US</strong><p class="descpara">We aim to popularize and educate the Bangladesh public about Japanese anime and manga culture, as well as provide a forum to facilitate communication between professionals and fans. We're passionate about all things anime. We're here to help you discover hidden gems, learn more about new and current anime, find fan art and cosplay of all your faves, and get your opinions!</div>
<div class="Images"></div>
</section>
<section class="feature-box closing">
<div class="sched">Section A<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque exercitationem ad sed enim maiores cum recusandae numquam quibusdam. Perferendis reiciendis ut tenetur dignissimos neque hic impedit optio quasi libero sunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, ipsum? Exercitationem accusantium quaerat numquam architecto cum culpa magnam illo quos quod. Eligendi placeat repellendus perferendis veritatis ducimus iure maxime vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae rerum quia odit veniam natus consequuntur iste eum eos officiis ab optio sed itaque quasi possimus voluptatibus, velit est dolor quo. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat nostrum in, quidem totam a atque obcaecati natus ratione quae rem ipsam sed hic laudantium enim aspernatur nemo cum, nobis eius.</p></div>
<div class="slidershow middle">
<div class="header">Header and Description</div>
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.png" alt="">
</div>
<div class="slide">
<img src="images/4.jpg" alt="">
</div>
<div class="slide">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</section>
<footer>footer</footer>
</body>
</html>
section.feature-box.closing {
margin: 5px;
padding: 10px;
height: 620px;
width: 1310px;
background-color: #34495e;
display: flex;
}
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
}
section.feature-box.closing div.sched {
width: 481px;
text-align: center;
color:black;
font-size: medium;
background-color: #c3edea;
}
section.feature-box.closing div.slidershow {
width: 700px;
height: 400px;
overflow: hidden;
}
section.feature-box.closing div.middle {
position: relative;
top: 68%;
left: 31%;
transform: translate(-50%, -50%);
}
section.feature-box.closing div.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
section.feature-box.closing div.navigation label.bar {
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
}
section.feature-box.closing div.navigation label.bar:hover {
background-color: white;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
section.feature-box.closing div.slides {
width: 500%;
height: 100%;
display: flex;
background-size: 100%;
}
section.feature-box.closing div.slides div.slide {
width: 20%;
transition: 0.6s;
}
section.feature-box.closing div.slides div.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}
尝试这个 ：
section.feature-box.closing div.slidershow div.header {
font-size: medium;
color: white;
padding-bottom: 20px;
text-align: center;
margin-top: 5px;
position: absolute;
left: 40%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句