如何在我的HTML页面底部创建空间

Question

我正在创建HTML和CSS网站。我想在页面底部添加一个空格。

我想在页面底部创建一些空间。我试图添加空的<p></p>标签<br>标签和 ，但没有帮助。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

body {}

nav {
  background-color: #0077b3;
  width: 1365px;
  left: 1px;
  padding-bottom: 60px;
  margin-top: -70px;
  position: absolute;
}

nav p {
  list-style-type: none;
  width: 160px;
  right: 100px;
  margin-top: 90px;
  text-align: center;
  position: absolute;
}

#p1 {
  top: 35px;
  left: 350px;
}

#p2 {
  top: 35px;
  left: 450px;
}

#p3 {
  top: 35px;
  left: 550px;
}

#p4 {
  top: 35px;
  left: 620px;
}

#p5 {
  top: 35px;
  left: 690px;
}

#p6 {
  top: -15px;
  right: 275px;
}

#p7 {
  top: -15px;
  right: 180px;
}

#p8 {
  top: 25px;
  right: 70px;
}

#p9 {
  top: 860px;
  left: 60px;
  position: absolute;
}

#p10 {
  top: 860px;
  left: 320px;
  position: absolute;
}

#p11 {
  top: 860px;
  left: 590px;
  position: absolute;
}

#p12 {
  top: 860px;
  right: 370px;
  position: absolute;
}

#p13 {
  top: 860px;
  right: 110px;
  position: absolute;
}

#bot1 {
  top: 950px;
  right: 110px;
  position: absolute;
}

h1 {
  color: #99ccff;
  top: 5px;
  left: 50px;
  position: absolute;
}

nav form {
  margin-top: 90px;
}

#bt3 {
  background-color: #90EE90;
}

input[type=text] {
  width: 30%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  left: 400px;
  top: 70px;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  position: absolute;
}

.button {
  background-color: #99ccff;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
  right: 400px;
  top: 5px;
  position: absolute;
}

#id1 {
  top: 100px;
  position: absolute;
}

#id2 {
  top: 100px;
  right: 60px;
  position: absolute;
}

#id3 {
  top: 100px;
  right: 360px;
  position: absolute;
}

#home {
  top: 680px;
  left: 30px;
  position: absolute;
}

#baby {
  top: 680px;
  left: 290px;
  position: absolute;
}

#clothes {
  top: 680px;
  left: 540px;
  position: absolute;
}

#elec {
  top: 680px;
  left: 810px;
  position: absolute;
}

#clear {
  top: 680px;
  right: 60px;
  position: absolute;
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  bottom: -750px;
  right: 200px;
  position: absolute;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<nav>
  <p id="p1" style="font-size: 20px; text-decoration: none;"><a href="clothes.php" style="text-decoration:none; color: #b3ccff;">Clothes</a></p>
  <p id="p2" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #b3ccff;">Electronics</a></p>
  <p id="p3" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #b3ccff;">Games</a></p>
  <p id="p4" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #b3ccff;">Pets</a></p>
  <p id="p5" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #b3ccff;">Home</a></p>
  <p id="p6" style="font-size: 20px"><a href="login.php" style="text-decoration:none; color: #b3ccff;">Login</a></p>
  <p id="p7" style="font-size: 20px"><a href="register.php" style="text-decoration:none; color: #b3ccff;">Register</a></p>
  <p id="p8" style="font-size: 25px"><a href="#" style="text-decoration:none; color: #b3ccff;">Cart</a></p>
  <p id="p9" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #ff6666;">Home</a></p>
  <p id="p10" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #ff6666;">Baby</a></p>
  <p id="p11" style="font-size: 20px"><a href="clothes.php" style="text-decoration:none; color: #ff6666;">Clothes</a></p>
  <p id="p12" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #ff6666;">Electronics</a></p>
  <p id="p13" style="font-size: 20px"><a href="#" style="text-decoration:none; color: #ff6666;">Clearance</a></p>

  <form>

    <input type="text" name="search" placeholder="Search..">

  </form>

</nav>

<button class="button button1">Search</button>

<a href="index.php">
  <h1>TheShoppingNetwork</h1>
</a>

<a href="index.php"><img id="id1" src="swim.webp" width="500px" height="500px"></a>
<a href="index.php"><img id="id2" src="swim2.webp" width="300px" height="500px"></a>
<a href="index.php"><img id="id3" src="swim3.webp" width="500px" height="500px"></a>
<a href="index.php"><img id="home" src="home.png" width="220px" height="220px"></a>
<a href="index.php"><img id="baby" src="baby.png" width="220px" height="220px"></a>
<a href="index.php"><img id="clothes" src="clothes.png" width="220px" height="220px"></a>
<a href="index.php"><img id="elec" src="elec.png" width="220px" height="220px"></a>
<a href="index.php"><img id="clear" src="clear.png" width="220px" height="220px"></a>

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="slide1.jpg" style="width:100%">
    <div class="text">Good Man Brand</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="slide2.jpg" style="width:100%">
    <div class="text">Amazon Original Good Omens</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="slide3.jpg" style="width:100%">
    <div class="text">Ring</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<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>

这就是我看到的：

Answer 1

在页面上添加填充

body {
    padding-bottom: 100px;
}

Answer 2

好吧，您正在尝试获得帮助的代码段为您提供了更好的答案。但是看起来您可能想要在页面底部添加边距或填充。

例如，您的图像容器具有一个.img-container类

因此在CSS中，您应该这样写。

.img-container {

margin-bottom: 50px;

}

或者您也可以尝试以下方法：

body {
padding-bottom: 50px;
}

Answer 3

body {
    min-height:1000px;
}