html - 我的页面在浏览器中移动/重新定位! (但在 Coda 预览中看起来不错)

Question

我是编码新手。我的代码在 Coda 预览中看起来应该如此，但是当我在浏览器 (Chrome) 中打开它时，一切都发生了变化。它随着浏览器窗口的变化而移动。我希望它在任何时候看起来都一样。我做错了什么？

(另外，我无法在后台播放我的幻灯片。你知道为什么吗？)

非常感谢您的帮助!

这是 Jsfiddle 和我的 CSS: My website

/* StyleSheet */

body {
  background-image: "sushi_main.jpg";
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
  background-size: 100%;
  z-index: -1;
}
#overlay{
  position: center;
  top: auto;
  left: auto;
  z-index: 1;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  width: 59%;
  height: 100%;
  size: 80px 25px;
  margin: auto;
  max-width: 820px;
  padding: 60px;
  
}

#header{
  position: auto;
  left: auto;
  z-index: 2;
  background-color: #030303;
  opacity: 100;
  width: 70%;
  max-height: 125px;
  margin: auto;
  position: fixed;
  max-width: 730px;
  left: 15.5%;
  top: 0;
}
h1 {
  text-align: right;
  color: #f4f5f7;
  letter-spacing: 3px;
  padding-top: 35px;
  padding-bottom: 30px;
  padding-right: 80px;
  font-family: 'Quicksand', sans-serif;

}
#logo {
  position:auto;
  margin-left:68px;
  margin-bottom: 0;
  margin-top: 500;
  width:80px;
  height:130px;
  padding: 30;
  position: fixed;
  z-index: 2;
}

#navbar {
  position: fixed;
  z-index: 3;
  background-color: #f4f5f7;
  max-height: 25px;
  width: 731px;
  left: 165px;
  top: 118px;
  word-spacing: 90px;
}
h2 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 2px;
  padding-top: 150px;
  padding-bottom: 4px;
  padding-right: 4px;
  font-family: 'Quicksand', sans-serif;
  opacity: 0.5;
}
p1 {
  text-align: center;
  color: #030303;
  padding-top: 35px;
  padding-bottom: 50px;
  padding-right: 50px;
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
}
p2 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 1px;
  font-size: 11px;
  font-family: 'Merriweather', serif;
  line-height: 1.5;
  border-style: bottom;
  border-width: 5px;
}

p3 {
  text-align: center;
  color: #f4f5f7;
  padding-top: 35px;
  padding-bottom: 50px;
  padding-right: 50px;
  font-size: 12px;
  font-family: 'Quicksand', sans-serif;
}
p4 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 1px;
  font-size: 11px;
  font-family: 'Merriweather', serif;
  line-height: 1.5;
  border-style: bottom;
  border-width: 5px;
  columns: 2;
  column-width: 100px;
}
ul {
  list-style-type: none;
  margin: 3px;
  padding: 2px;
  text-align: center;
  letter-spacing: 2px;
}
a:hover{
  color:#e5001a; 
  text-decoration:none; 
  cursor:pointer;  
}
.active {
  background-color: #9e520f;
}
a {
  color: #030303;
  text-decoration: none;
  font-family: 'Quicksand', sans-serif;
}
#footer  {
  z-index: 8;
  background-color: #030303;
  width: 100%;
  max-height: 1px;
  margin: auto;
}
hr { 
  display: block;
  margin-top: 3em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
#colum  {
  z-index: 8;
  background-color: rgba 0, 0, 0, 0.65;
  width: 100%;
  max-height: 500px;
  margin: auto;
  column-count: 2;
}
html { 
  min-height: 100%; 
}
body { 
  height: 100%; 
}
.slideshow {
  list-style: none;
  z-index: 1;
}
.slideshow li span{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span { 
  opacity: 1; 
}
.slideshow li:nth-child(1) span { 
  background-image: url(sushi_main.jpg); 
}
.slideshow li:nth-child(2) span {
  background-image: url(sushii.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}
.slideshow li:nth-child(3) span{
  background-image: url(akiko_sushi.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}
.slideshow li:nth-child(4) span     {
  background-image: url(pabu_sushi.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

#wrapper {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

<!doctype html>

<title>Sushi website Midterm</title>
<link rel="stylesheet" type="text/css" href="sushi.css">


<link href="https://fonts.googleapis.com/css?family=Merriweather|Quicksand" rel="stylesheet">

</head>

<body>

  <div id="navbar">
    <p1>TJOHLANGAJEBFKSCB LHE VSCBFF</p1>
  </div>

  <body background="sushi_main.jpg">


    <div id="header">

      <img id="logo" src="ss_logo2-01.png" alt="Sushi in San Francisco Logo" style="float:left;" />

      <h1>Sushi in San Francisco</h1>

    </div>

    <div id="navbar">
      <p1>

        <ul>
          <a href="movies.html">AKIKO's</a></li>
        <a href="dogs.html">Sushi1</a></li>
      <a href="food.html">Sushi2</a></li>
    <a href="index.html">Sushi3</a></li>
  </ul>


</p1>
</div>

<div id="overlay">

  <h2>Experience Exceptional </h2>


  <center>
    <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
    </p2>
  </center>

  <hr>

  <h2>AKIKO's </h2>

  <div id="colum">
    <p4>Akiko's, at 431 Bush and not related to the restaurant of the same name on Mason Street, is a cult hit in the making because it has all the intriguing elements that provide cachet: There's no sign on or over the door, so it's easy to miss. If
      you call the restaurant you're likely to encounter a full voice-mail box; fortunately, you can book on OpenTable, or show up and hope for a table or a seat at the sushi bar. The restaurant has been around for 18 years, but, four years ago, Ray
      Lee bought out his parents and brought in Ricky Yap as chef. In the last few months, they've ramped up the menu, hired more staff, remodeled and expanded the sushi bar and took out some tables. All told, the restaurant seats 38. Once inside,
      diners are greeted by a friendly host, but if you have a reservation after 7 or so you may still have to wait a half hour for a table. People don't seem to be in a rush to leave.
    </p4>
  </div>

  <hr>

  <h2>Experience Exceptional </h2>

  <center>
    <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
    </p2>
  </center>

  <hr>

  <h2>Experience Exceptional </h2>

  <center>
    <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
    </p2>
  </center>

  <hr>

  <h2>Experience Exceptional </h2>

  <center>
    <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
    </p2>
  </center>

  <hr>

  <divone>
    <p3>Copyright my name 2016</p3>
  </divone>


  <ul class="slideshow">

    <li> <span>sushi_main.jpg</span> </li>

    <li> <span>Slide Two</span> </li>

    <li> <span>Slide Three</span> </li>

    <li> <span>Slide Four</span> </li>

  </ul>

Answer 1

您的 fiddle 中的 HTML 格式完全错误:否 <html>标签，多个 <body> , 未闭合的标签, ...

你应该再读一遍HTML basics ，并使用 validator在发布您的代码之前。

这是一个固定版本:

/* StyleSheet */

body {
  background-image: "sushi_main.jpg";
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
  background-size: 100%;
  z-index: -1;
}
#overlay{
  position: center;
  top: auto;
  left: auto;
  z-index: 1;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  width: 59%;
  height: 100%;
  size: 80px 25px;
  margin: auto;
  max-width: 820px;
  padding: 60px;
  
}

#header{
  position: auto;
  left: auto;
  z-index: 2;
  background-color: #030303;
  opacity: 100;
  width: 70%;
  max-height: 125px;
  margin: auto;
  position: fixed;
  max-width: 730px;
  left: 15.5%;
  top: 0;
}
h1 {
  text-align: right;
  color: #f4f5f7;
  letter-spacing: 3px;
  padding-top: 35px;
  padding-bottom: 30px;
  padding-right: 80px;
  font-family: 'Quicksand', sans-serif;

}
#logo {
  position:auto;
  margin-left:68px;
  margin-bottom: 0;
  margin-top: 500;
  width:80px;
  height:130px;
  padding: 30;
  position: fixed;
  z-index: 2;
}

#navbar {
  position: fixed;
  z-index: 3;
  background-color: #f4f5f7;
  max-height: 25px;
  width: 731px;
  left: 165px;
  top: 118px;
  word-spacing: 90px;
}
h2 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 2px;
  padding-top: 150px;
  padding-bottom: 4px;
  padding-right: 4px;
  font-family: 'Quicksand', sans-serif;
  opacity: 0.5;
}
p1 {
  text-align: center;
  color: #030303;
  padding-top: 35px;
  padding-bottom: 50px;
  padding-right: 50px;
  font-size: 16px;
  font-family: 'Quicksand', sans-serif;
}
p2 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 1px;
  font-size: 11px;
  font-family: 'Merriweather', serif;
  line-height: 1.5;
  border-style: bottom;
  border-width: 5px;
}

p3 {
  text-align: center;
  color: #f4f5f7;
  padding-top: 35px;
  padding-bottom: 50px;
  padding-right: 50px;
  font-size: 12px;
  font-family: 'Quicksand', sans-serif;
}
p4 {
  text-align: center;
  color: #f4f5f7;
  letter-spacing: 1px;
  font-size: 11px;
  font-family: 'Merriweather', serif;
  line-height: 1.5;
  border-style: bottom;
  border-width: 5px;
  columns: 2;
  column-width: 100px;
}
ul {
  list-style-type: none;
  margin: 3px;
  padding: 2px;
  text-align: center;
  letter-spacing: 2px;
}
a:hover{
  color:#e5001a; 
  text-decoration:none; 
  cursor:pointer;  
}
.active {
  background-color: #9e520f;
}
a {
  color: #030303;
  text-decoration: none;
  font-family: 'Quicksand', sans-serif;
}
#footer  {
  z-index: 8;
  background-color: #030303;
  width: 100%;
  max-height: 1px;
  margin: auto;
}
hr { 
  display: block;
  margin-top: 3em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
#colum  {
  z-index: 8;
  background-color: rgba 0, 0, 0, 0.65;
  width: 100%;
  max-height: 500px;
  margin: auto;
  column-count: 2;
}
html { 
  min-height: 100%; 
}
body { 
  height: 100%; 
}
.slideshow {
  list-style: none;
  z-index: 1;
}
.slideshow li span{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span { 
  opacity: 1; 
}
.slideshow li:nth-child(1) span { 
  background-image: url(sushi_main.jpg); 
}
.slideshow li:nth-child(2) span {
  background-image: url(sushii.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}
.slideshow li:nth-child(3) span{
  background-image: url(akiko_sushi.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}
.slideshow li:nth-child(4) span     {
  background-image: url(pabu_sushi.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}

#wrapper {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

<!doctype html>
<html>

  <head>
    <title>Sushi website Midterm</title>
    <link rel="stylesheet" type="text/css" href="sushi.css">


    <link href="https://fonts.googleapis.com/css?family=Merriweather|Quicksand" rel="stylesheet">

  </head>

  <body>

    <div id="navbar">
      <p1>TJOHLANGAJEBFKSCB LHE VSCBFF</p1>
    </div>

    <div background="sushi_main.jpg">


      <div id="header">

        <img id="logo" src="ss_logo2-01.png" alt="Sushi in San Francisco Logo" style="float:left;" />

        <h1>Sushi in San Francisco</h1>

      </div>

      <div id="navbar">
        <p1>

          <ul>
            <li><a href="movies.html">AKIKO's</a></li>
            <li><a href="dogs.html">Sushi1</a></li>
            <li><a href="food.html">Sushi2</a></li>
            <li><a href="index.html">Sushi3</a></li>
          </ul>


        </p1>
      </div>

      <div id="overlay">

        <h2>Experience Exceptional </h2>


        <center>
          <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
          </p2>
        </center>

        <hr>

        <h2>AKIKO's </h2>

        <div id="colum">
          <p4>Akiko's, at 431 Bush and not related to the restaurant of the same name on Mason Street, is a cult hit in the making because it has all the intriguing elements that provide cachet: There's no sign on or over the door, so it's easy to miss. If
            you call the restaurant you're likely to encounter a full voice-mail box; fortunately, you can book on OpenTable, or show up and hope for a table or a seat at the sushi bar. The restaurant has been around for 18 years, but, four years ago, Ray
            Lee bought out his parents and brought in Ricky Yap as chef. In the last few months, they've ramped up the menu, hired more staff, remodeled and expanded the sushi bar and took out some tables. All told, the restaurant seats 38. Once inside,
            diners are greeted by a friendly host, but if you have a reservation after 7 or so you may still have to wait a half hour for a table. People don't seem to be in a rush to leave.
          </p4>
        </div>

        <hr>

        <h2>Experience Exceptional </h2>

        <center>
          <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
          </p2>
        </center>

        <hr>

        <h2>Experience Exceptional </h2>

        <center>
          <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
          </p2>
        </center>

        <hr>

        <h2>Experience Exceptional </h2>

        <center>
          <p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
          </p2>
        </center>

        <hr>

        <divone>
          <p3>Copyright my name 2016</p3>
        </divone>


        <ul class="slideshow">

          <li> <span>sushi_main.jpg</span> </li>

          <li> <span>Slide Two</span> </li>

          <li> <span>Slide Three</span> </li>

          <li> <span>Slide Four</span> </li>

        </ul>
      </div>
    </div>
  </body>
</html>