Question

我目前正在利用自己在本课程中学到的知识建立自己的网站，但遇到了一个小障碍。我将摄影作为一种爱好，并正在为我的摄影页面建立一个网站。在页面的前面，我正在尝试制作一个小的幻灯片（如下图所示），但是我的幻灯片正到达页面底部，并且太大了。我还包括了用HTML和CSS编写的代码，并且想知道是否有人可以指导我实现这一目标。非常感谢您抽出宝贵的时间阅读本文！

下面是我的HTML文件中的代码。

<div class="slide-container">
  <span id="slider-image-1"></span>
  <span id="slider-image-2"></span>
  <span id="slider-image-3"></span>
<div class="image-container">
  <img src="Resources/img/r20.jpg" class="slider-image">
  <img src="Resources/img/r21.jpg" class="slider-image">
  <img src="Resources/img/r22.jpg" class="slider-image">
</div>
<div class="button-container">
  <a href="#slider-image-1" class="slider-button"></a>
  <a href="#slider-image-2" class="slider-button"></a>
  <a href="#slider-image-3" class="slider-button"></a>
</div>

不确定如何显示我的CSS代码，因此如果有人可以在这里帮助我，那将是很好的选择！

.slide-container {
  width: 800px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
}

.image-container {
 width: 2400px;
 height: 600px;
 position: relative;
 transition: left 0.2s;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
}

.button-container {
  top: -20px;
  position: relative;
}

.slider-button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: white;
}

#slider-image-1:target~.image-container {
  left: 0px;
}

#slider-image-2:target~.image-container {
  left: -800px;
}

#slider-image-3:target~.image-container {
  left: -1600px;
}

我希望幻灯片的位置（当前为3张图片，但至少要添加8张）在左下角的首页上，但不幸的是没有显示，并且一直显示到底部，图像被放大。

如何放置幻灯片？

0 个答案: