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

标签 html css

我是编码新手。 我的代码在 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>

最佳答案

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

关于html - 我的页面在浏览器中移动/重新定位! (但在 Coda 预览中看起来不错)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39969895/

上一篇：c# - 在页面上多次引用单个图像文件是否会影响性能？

下一篇：javascript - jQuery如何获取所有输入字段的值

相关文章：

jquery - Firefox 中的事件 CSS 伪类和 iscroll 问题

css - 动画范围从 0px 到 ...%？

php - 无法使用 php 将答案插入存储在 textarea 输入中的数据库中

html - 为什么 'right' 属性不适用于我在 IE 中的代码？

javascript - 使用javascript更改样式onclick时希望减少重复

html - 我如何为响应式图像提供全宽

css - 在没有表格的情况下使用 CSS 定位按钮

javascript - 关于按钮、javascript 和 HTML 的问题

javascript - 如何禁用浏览器的加载圈(靠近图标)

javascript - 如何使用 AngularJS 添加不同的背景颜色

©2024 IT工具网  联系我们