Question

首先，我的项目将于周二到期，所以我希望有人可以帮我解决这个问题。

我为我的最终项目创建了一个网站，在检查页面时，正确显示所有内容。但是，一旦我将页面上传到学校服务器并在那里进行检查，它就会以不同的方式显示。我包括了我所看到的屏幕截图。 What I initially see...

What I see after uploading to the server

包含图片的页面部分的HTML如下：

＆＃13;

header { background-position: left;
         background-color: #FFFFFF;
         background-repeat: no-repeat;
         background-size: 20%;
         margin-bottom: 0;
         color: #FFFFFF;
         font-family: Georgia, Serif;
         height: 160px;
     }

#wrapper { background-color: #8b4513;
	       margin-right: auto;
           margin-left: auto;
	       width: 80%;
           min-width: 720px;
           max-width: 1280px;
           box-shadow: 5px 5px 5px #828282;
	 }

.logo { background-color: #FFFFFF;
        background-repeat: no-repeat;
        display: inline-block;
        height: 160px;
        padding: 1em
         }

h1 { color: #000000; 
     display: inline-block;
     line-height: 200%;
     height: 72px;
     margin-bottom: 1.5em;
     background-repeat: no-repeat;
     overflow: hidden;
     text-indent: 10%;
     text-decoration: none;
     }

＆＃13;

<div id="wrapper">
        <header>
        <a href="index.html">
        <img src="../project/images/logo.png" alt="logo" class="logo">
        <h1>Portland Historical Tours</h1>
        </a>
        </header>

＆＃13;

任何帮助都会非常感激，但请记住，我是新手，我使用的HTML / css并不是什么先进的（例如包括java脚本）。

最终项目中的图像显示第二个重叠图像

0 个答案: