Question

我对某些东西感到困惑，每次我放置在我的网站底部的一些代码都会将我的网站略微向右抛出，这使得当从该页面转到另一个页面时它会变得很刺耳，你可以看到导航小组跳到右边等等。

我是这方面的主要人物，设计我自己的艺术家网站。关于为什么我把它放入的任何建议。感谢任何帮助！

这是引起这种转变的代码：

<div class="copyright">
<p>
COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED
</p>
</div>

这是在css页面上：*注意删除此css仍然无法缓解转变。

.copyright {
font-size: 51%;
color: #a6a6a6;
letter-spacing:1px;
padding-bottom:20px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino,                 
 serif;  
}

这就是整个代码：

* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  /*For IE6 Shenanigans*/
  font-family: Verdana, Geneva, sans-serif;
  color: black;
}

.bio {
  color: #808080;
  line-height: 160%;
  line-spacing: 40%;
  max-width: 700px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  margin: 0 auto;
  text-align: left;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 48%;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  letter-spacing: 2.5px;
  word-spacing: 25px;
  font-weight: 300;
  color: #bfbfbf;
}

#headerimg {
  padding-top: 30px;
}

li {
  display: inline;
}

.spacer1 {
  margin-top: 20px;
}

.spacer2 {
  margin-top: 50px;
}

.spacer3 {
  margin-top: 50px;
}

.spacer4 {
  margin-top: 50px;
}

.infoimg img {
  -webkit-box-shadow: 3px 4px 3px #7C7C7C;
  box-shadow: 3px 4px 3px #7C7C7C;
  min-width: 350px;
  display: inline-block;
  margin-top: 50px;
  border-style: solid;
  border-color: gray;
  border-width: 1px;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
}

.copyright {
  font-size: 51%;
  color: #a6a6a6;
  letter-spacing: 1px;
  padding-bottom: 20px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}

a {
  color: #a6a6a6;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.speech {
  font-size: 100%;
  color: #808080;
  line-height: 160%;
  line-spacing: 40%;
  max-width: 700px;
  font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
  margin: 0 auto;
}

<div id="headerimg">
  <a href="index.html"><img src="img/headerfont2.PNG" style=" width:28%"> </a>
</div>

<div class="spacer1">

</div>
<div class="w3-container">
  <ul>
    <li><a href="index.html">VISUAL </a></li>
    <li><a href="info.html">INFO</a></li>
    <li><a href="contact.html">CONTACT</a></li>
  </ul>
</div>


<div class="infoimg">
  <img src="img/info.png" style="width:20%">
</div>

<div class="spacer2">

</div>

<div class="bio">
  <p>
    Wilson Schlamme was born in Jackson Mississippi in 1988. He graduated from the USC School of Cinematic Arts in 2010, focusing his studies on photography and visual design. Finding himself dissatisfied with the medium post college, Wilson shifted his work
    into painting, and spent the next several years developing a technique largely derived from fluid based paint and self crafted tools. Wilson currently lives in Los Angeles, where he creates abstract works, continuing the tradition of action painting
    and further progressing his organic and overwhelming fluid like style.
  </p>
</div>

<div class="spacer3">

</div>
<div class="speech">
  <p>
    <i>
    "While the work ranges in severity, it's structured around a succinct visual         
    reaction produced from color and textual blending. This reaction shapes not 
    only the core lines of each piece but is also the vocabulary of the work 
    itself.
    Aggressive blending of this sort (done not with a brush but with a hard 
    edge), combined with a limited color palette, allows for the viewer to feel 
    familiar and secure with the work while at the same time in question over 
    the fervent gestural movements. This polarization of the known yet unknown, 
    similar yet contrasting, is a circumstance that is shared both with the 
    viewer and theartist, and likewise becomes a focal point of shared 
    experience."
    </i>
  </p>
</div>

<div class="spacer4">
</div>

<div class="copyright">
  <p>
    COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED

</div>

Answer 1

您可以使用固定或绝对定位。固定将始终保持在屏幕上，即使在滚动期间;绝对会滚动：

.copyright {
    position: fixed;
    bottom: 20px;
    font-size: 51%;
    color: #a6a6a6;
    letter-spacing: 1px;
    font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}

注意：由于固定位置，我删除了填充。

注意：我也没有得到转变，但是，我不会在页面之间来回走动。

款式看起来不错，只要注意你的色彩对比。确保它通过了可访问性标准，以便视力不佳的人能够阅读您的网站。

一段段代码让我的网站定位关闭？

1 个答案:

一段段代码让我的网​​站定位关闭？

1 个答案:

一段段代码让我的网站定位关闭？