个人中心
gpt4 book ai didi

html - 我网站底部不需要的空白

转载 作者：太空宇宙 更新时间：2023-11-04 06:36:30 25 4
gpt4 key购买 nike 

.header {
  position: relative;
  top: 1px;
  left: 589px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.subtitle {
  position: relative;
  right: 26px;
  letter-spacing: 2px;
  padding-top: 5px;
  font-size: 21px;
  font-family: arial;
  font-weight: bold;
  color: #6b6b6b;
  text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}


/* Menu*/
nav {
  position: relative;
  left: 210px;
  height: 70px;
  border-radius: 60px;
  background: #dc67e9;
  width: 1000px;
}

ul {
  margin-left: 17%;
}

ul li {
  display: inline-block;
  line-height: 80px
}

ul li a {
  text-decoration: none;
  font-family: 'Coiny', cursive;
  font-size: 19px;
  color: white;
  padding: 0 20px
}

ul li a:hover {
  color: black;
}

.bannerimage {
  margin-left: 5px;
  margin-top: 4px;
}

.banner {
  margin-top: 4px;
  background-color: #dc67e9;
  width: 100%;
  height: 589px;
}

.bannerpromo1 {
  position: relative;
  bottom: 500px;
  margin-left: 60px;
  font-family: 'Lobster', cursive;
  color: black;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 70px;
}

.bannerpromo2 {
  position: relative;
  bottom: 470px;
  margin-left: -780px;
  font-family: 'Lobster', cursive;
  color: #585656;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 50px;
  text-align: center;
}

.subscribebanner {
  width: 250px;
  height: 50px;
  background-color: #dc67e9;
  position: relative;
  left: 190px;
  bottom: 430px;
  border: 4px solid white;
}

.subscribebannertext {
  margin-left: 30px;
  margin-top: 15px;
  font-family: 'Coiny', cursive;
  word-spacing: 2px;
  font-size: 30px;
}

.howitworks {
  font-size:60px;
  font-family: 'Lobster', cursive;
  text-shadow: #a8a8a8 4px 6px;
  margin-top: 50px;
  position: relative;
  left: 555px;
}

.subheaderbox1{
  position: relative;
  margin-top: 20px;
  right: 315px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox2{
  position: relative;
  bottom: 100px;
  left: 65px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox3{
  position: relative;
  bottom: 200px;
  left: 450px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaders {
  position: relative;
  bottom: 275px;
  font-size: 40px;
  margin-left: -265px;
  word-spacing: 250px;
  letter-spacing: 3px;
  color: white;
}

.box1{
  position: relative;
  right: 370px;
  bottom: 225px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box2{
  position: relative;
  right: -15px;
  bottom: 500px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box3{
  position: relative;
  right: -405px;
  bottom: 780px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.step1{
  position: relative;
  right: 932px;
  bottom: 219px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step2{
  position: relative;
  right: 546px;
  bottom: 493px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step3{
  position: relative;
  right: 153px;
  bottom: 766px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.section1{
  position: relative;
  margin-top: 20px;
  bottom: 660px;
  background-color: #adcae1;
  margin-left: -570px;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section2{
  position: relative;
  left: 149px;
  bottom: 660px;
  background-color: #adcae1;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section1title{
  padding-top: 80px;
  font-size: 70px;
}
.section1text{
  font-size: 40px;
  line-height: 50px;
  text-shadow: none;
  color: #f0f0f0;
  position: relative;
  bottom: 10px;
}
.section2title{
  padding-top: 100px;
  font-size: 70px;
}
.section2text{
  font-size: 35px;
  line-height: 40px;
  text-shadow: none;
  color: #f0f0f0;
  padding-left: 1px;
  position: relative;
  bottom: 20px;
}
.imgsect1{
  margin-left: 148px;
  position: relative;
  bottom: 1660px
}

.imgsect2{
  position: relative;
  bottom: 1668px;
  right: 571px;
}

.examples{
  font-size: 50px;
  text-align: center;
  line-height: 180px;
  position: relative;
  bottom: 1670px;
  right: 550px;
}
.examplesdesign1{
  position: relative;
  bottom: 2580px;
  right: 320px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
.examplesdesign2{
  position: relative;
  bottom: 1730px;
  right: 325px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
  <head>
    <title>SweetVie-Home-Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="indexstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    <link rel="stylesheet" href="indexstyle.css">
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="topfiller"></div>

    <div class="header">
      <img src="images/logo.jpg" height="90" alt="SweetVieLogo">
      <h2 class="subtitle">Vegan Baking Made Easy</h2>
    </div>

    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">COMMUNITY</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
      </ul>
    </nav>

    <div class="banner">
      <img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
      <h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
      <h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
      <div class="subscribebanner">
        <h3 class="subscribebannertext"> <a href="Subscribe.html" style="color: white"> SUBSCRIBE</a></h3>
      </div>
    </div>

    <div class="howitworks">
      <h1>How It Works</h1>
      <div class="subheaderbox1"></div>
      <div class="subheaderbox2"></div>
      <div class="subheaderbox3"></div>
      <div class="subheaders">
        <h2>Click Prepare Enjoy</h2>
      </div>

      <div>
        <img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
      </div>
      <h3 class="step1">Select one of the three<br>subscription options</h3>
      <div>
        <img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
      </div>
      <h3 class="step2">Get involved and play<br>with your food</h3>
      <div>
        <img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
      </div>
      <h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>

    <div class="section1">
      <h2 class="section1title">Food Time<br> Family Time</h2>
      <br>
      <p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
    </div>
    <div class="section2">
      <h2 class="section2title">The Next Step</h2>
      <br>
      <p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
    </div>
    <div class="imgsect1">
      <img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
    </div>
    <div class="imgsect2">
      <img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
    </div>

    <div class="examples">
      <h2>Showcasing a collection of our most classic recipes</h2>
      <img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
    </div>
    <div class="examplesdesign1"></div>
    <div class="examplesdesign2"></div>
  </body>
</html>

我对为什么我的网站底部有一大片空白感到困惑。我对 html/css 不太熟悉，但我检查了网站的元素，似乎是 div 类“howitworks”创造了额外的空间。
我在 div 的 css 样式中没有看到可能导致此问题的问题，但话又说回来，我对 css 属性及其各自元素之间的交互非常不熟悉。任何帮助将不胜感激

最佳答案

您始终将 position:relative 与 bottom: length 结合使用，以重新定位您的元素。

上述方法仅重新定位元素的渲染层，而不是 DOM 中的实际元素。这意味着，从技术上讲，您的元素仍处于应用 bottom 之前的相同位置，因此它占据相同的空间。

快速而肮脏的解决方法是 给你的最后一个元素一个很大的负底边距，以弥补额外的空间。 转念一想，修复它的最快方法是将所有 bottom: value 替换为 margin-top: -value。

下面是将 bottom 替换为负上边距后的布局:

.header {
  position: relative;
  top: 1px;
  left: 589px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.subtitle {
  position: relative;
  right: 26px;
  letter-spacing: 2px;
  padding-top: 5px;
  font-size: 21px;
  font-family: arial;
  font-weight: bold;
  color: #6b6b6b;
  text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}


/* Menu*/
nav {
  position: relative;
  left: 210px;
  height: 70px;
  border-radius: 60px;
  background: #dc67e9;
  width: 1000px;
}

ul {
  margin-left: 17%;
}

ul li {
  display: inline-block;
  line-height: 80px
}

ul li a {
  text-decoration: none;
  font-family: 'Coiny', cursive;
  font-size: 19px;
  color: white;
  padding: 0 20px
}

ul li a:hover {
  color: black;
}

.bannerimage {
  margin-left: 5px;
  margin-top: 4px;
}

.banner {
  margin-top: 4px;
  background-color: #dc67e9;
  width: 100%;
  height: 589px;
}

.bannerpromo1 {
  position: relative;
  margin-top: -500px;
  margin-left: 60px;
  font-family: 'Lobster', cursive;
  color: black;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 70px;
}

.bannerpromo2 {
  position: relative;
  margin-top: -470px;
  margin-left: -780px;
  font-family: 'Lobster', cursive;
  color: #585656;
  text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
  font-size: 50px;
  text-align: center;
}

.subscribebanner {
  width: 250px;
  height: 50px;
  background-color: #dc67e9;
  position: relative;
  left: 190px;
  margin-top: -430px;
  border: 4px solid white;
}

.subscribebannertext {
  margin-left: 30px;
  margin-top: 15px;
  font-family: 'Coiny', cursive;
  word-spacing: 2px;
  font-size: 30px;
}

.howitworks {
  font-size:60px;
  font-family: 'Lobster', cursive;
  text-shadow: #a8a8a8 4px 6px;
  margin-top: 50px;
  position: relative;
  left: 555px;
}

.subheaderbox1{
  position: relative;
  margin-top: 20px;
  right: 315px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox2{
  position: relative;
  margin-top: -100px;
  left: 65px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaderbox3{
  position: relative;
  margin-top: -200px;
  left: 450px;
  border-radius: 25px;
  background: #adcae1;
  width: 200px;
  height: 100px;
}
.subheaders {
  position: relative;
  margin-top: -275px;
  font-size: 40px;
  margin-left: -265px;
  word-spacing: 250px;
  letter-spacing: 3px;
  color: white;
}

.box1{
  position: relative;
  right: 370px;
  margin-top: -225px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box2{
  position: relative;
  right: -15px;
  margin-top: -500px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}
.box3{
  position: relative;
  right: -405px;
  margin-top: -780px;
  border-radius: 7px;
  border: 5px dotted #dc67e9;
}

.step1{
  position: relative;
  right: 932px;
  margin-top: -219px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step2{
  position: relative;
  right: 546px;
  margin-top: -493px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}
.step3{
  position: relative;
  right: 153px;
  margin-top: -766px;
  color: #666666;
  font-size: 30px;
  text-align: center;
}

.section1{
  position: relative;
  margin-top: 20px;
  margin-top: -660px;
  background-color: #adcae1;
  margin-left: -570px;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section2{
  position: relative;
  left: 149px;
  margin-top: -660px;
  background-color: #adcae1;
  width: 720px;
  height: 500px;
  text-align: center;
  color: white;
}
.section1title{
  padding-top: 80px;
  font-size: 70px;
}
.section1text{
  font-size: 40px;
  line-height: 50px;
  text-shadow: none;
  color: #f0f0f0;
  position: relative;
  bottom: 10px;
}
.section2title{
  padding-top: 100px;
  font-size: 70px;
}
.section2text{
  font-size: 35px;
  line-height: 40px;
  text-shadow: none;
  color: #f0f0f0;
  padding-left: 1px;
  position: relative;
  bottom: 20px;
}
.imgsect1{
  margin-left: 148px;
  position: relative;
  margin-top: -1660px
}

.imgsect2{
  position: relative;
  margin-top: -1668px;
  right: 571px;
}

.examples{
  font-size: 50px;
  text-align: center;
  line-height: 180px;
  position: relative;
  margin-top: -1670px;
  right: 550px;
}
.examplesdesign1{
  position: relative;
  margin-top: -2580px;
  right: 320px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
.examplesdesign2{
  position: relative;
  margin-top: -1730px;
  right: 325px;
  width: 980px;
  height: 8px;
  background-color: #dc67e9;
}
<!DOCTYPE html>
<html>
  <head>
    <title>SweetVie-Home-Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="indexstyle.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
    <link rel="stylesheet" href="indexstyle.css">
    <style>
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="topfiller"></div>

    <div class="header">
      <img src="images/logo.jpg" height="90" alt="SweetVieLogo">
      <h2 class="subtitle">Vegan Baking Made Easy</h2>
    </div>

    <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">COMMUNITY</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
      </ul>
    </nav>

    <div class="banner">
      <img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
      <h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
      <h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
      <div class="subscribebanner">
        <h3 class="subscribebannertext"> <a href="Subscribe.html" style="color: white"> SUBSCRIBE</a></h3>
      </div>
    </div>

    <div class="howitworks">
      <h1>How It Works</h1>
      <div class="subheaderbox1"></div>
      <div class="subheaderbox2"></div>
      <div class="subheaderbox3"></div>
      <div class="subheaders">
        <h2>Click Prepare Enjoy</h2>
      </div>

      <div>
        <img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
      </div>
      <h3 class="step1">Select one of the three<br>subscription options</h3>
      <div>
        <img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
      </div>
      <h3 class="step2">Get involved and play<br>with your food</h3>
      <div>
        <img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
      </div>
      <h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>

    <div class="section1">
      <h2 class="section1title">Food Time<br> Family Time</h2>
      <br>
      <p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
    </div>
    <div class="section2">
      <h2 class="section2title">The Next Step</h2>
      <br>
      <p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
    </div>
    <div class="imgsect1">
      <img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
    </div>
    <div class="imgsect2">
      <img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
    </div>

    <div class="examples">
      <h2>Showcasing a collection of our most classic recipes</h2>
      <img src="images/dessertsarranged.jpg" width="900px" height="800px" alt="">
    </div>
    <div class="examplesdesign1"></div>
    <div class="examplesdesign2"></div>
  </body>
</html>

但这一点以及您构建布局的方式并不是一个好的设计实践(尤其是因为您不知道需要弥补多少，因为您的元素在不同设备上可能具有不同的高度)。因此，在各种宽度的设备或宽度可变的设备(想想旋转手机或平板电脑)上合理地显示内容会遇到相当大的问题。

更好的方法是重新考虑您的布局，可能使用容器/部分并允许内容占据它们在 DOM 中的空间并相应地调整它们的父级。

注意:position:relative; left|top|bottom|right: length; 是一种用于动画的技术，特别是因为它实际上并没有从 DOM 中移动实际元素，因此不会触发后续的重新渲染DOM 中的元素，使动画在浏览器上非常轻(不需要在每一帧重新绘制文档的其余部分)。这不是一种用于布局的技术。

关于html - 我网站底部不需要的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54173362/

25 4 0
文章推荐： python - 如何从 memcached 中删除旧的烧杯 session ？
文章推荐： c++ - 创建和读取数据的速度
文章推荐： python - 带空白区域的 Matplotlib 等高线
文章推荐： css - 将sass编译成一个css文件时Gulp复制css
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com