我是编码的新手。 我的代码看起来应该在Coda Preview中，但是当我在浏览器（Chrome）中打开它时，一切都已移动。它作为改变brwoser窗口移动。我希望它在任何时候看起来都一样。我做错了什么？
（另外，我无法在后台播放我的幻灯片。你知道为什么吗？）
非常感谢一些帮助！
这是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>
答案 0 :(得分：1)
你小提琴中的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>