Question

我决定尝试一下名为Scarlet by Macaw的新程序。我设置了一个页面，一切顺利，但是当我将代码移动到Dreamweaver中时，图像已经消失。我已经摆弄了几个小时，现在我把头发拉了出来。它是基本的东西，我认为缺少z-index，但是给它一个并没有改变这个问题。 CSS位于页面本身，因为它是一页的交易。丢失的图像是UPS徽标，位于其他客户徽标旁边，排在最后。我给你一个行号，但是没有:(

有些灵魂可以告诉我我失踪了吗？

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
<title>index</title>

 <style type="text/css">
@font-face {
    font-family: 'Open Sans', sans-serif;
    src: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    font-weight: 400;
    font-style: normal;
}

h1  {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: bold;
line-height:2;
margin-top: 30px;
margin-bottom: 1px;
}

h2  {
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
line-height:1.38;
margin-top: 0px;
margin-bottom: 0px;
}

h3  {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: bold;
line-height:1.38;
margin-top: 30px;
margin-bottom: 1px;
}

h4  {
color: #000000;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
line-height:1.38;
margin-top: 0px;
margin-bottom: 0px;
}

 .fluid-span-1 {
  width: 6.5%;
}

.fluid-span-2 {
  width: 15%;
}

.fluid-span-3 {
  width: 23.5%;
}

.fluid-span-4 {
  width: 32%;
}

.fluid-span-5 {
  width: 40.5%;
}

.fluid-span-6 {
  width: 49%;
}

.fluid-span-7 {
  width: 57.5%;
}

.fluid-span-8 {
  width: 66%;
}

.fluid-span-9 {
  width: 74.5%;
}

.fluid-span-10 {
  width: 83%;
}

.fluid-span-11 {
  width: 91.5%;
}

.fluid-span-12 {
  width: 100%;
}

.fluid-offset-1 {
  margin-left: 8.5%;
}

.fluid-offset-2 {
  margin-left: 17%;
}

.fluid-offset-3 {
  margin-left: 25.5%;
}

.fluid-offset-4 {
  margin-left: 34%;
}

.fluid-offset-5 {
  margin-left: 42.5%;
}

.fluid-offset-6 {
  margin-left: 51%;
}

.fluid-offset-7 {
  margin-left: 59.5%;
}

.fluid-offset-8 {
  margin-left: 68%;
}

.fluid-offset-9 {
  margin-left: 76.5%;
}

.fluid-offset-10 {
  margin-left: 85%;
}

.fluid-offset-11 {
  margin-left: 93.5%;
}

body {background-color:#999999;
    font-size:1em;
}

.about{
    position: relative;
    float: left;
    clear: both;
    width: 100%;
    height: 240px;
    background-image: url(images/backgrounds/lt_gray.png);
    background-size: auto auto;
}

.blurb {
    position:absolute;
    top:0;left:17%;
    width:33%;
    height:283px;
}

.blurb2 {
    float:left;
    width:50%;
    height:239px;
    margin-left:40.9492199999%;
}

.clients {
    position:relative;
    float:left;
    clear:both;
    width:33%;
    height:100px;
    margin:400px 0 0 17%;
}

.content{
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 500px;
    background-image: url(images/backgrounds/dk_gray.png);
    background-size: auto auto;
    background-position: left top;
}

.facebook {
    display:block;
    position:absolute;
    top:0;
    left:-0.2588757397%;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:5;
}

.form {
    position:absolute;
    top:0;left:51.8333333333%;
    width:33%;
    height:350px;
}

.google {
    display:block;
    position:absolute;
    top:0;left:143px;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:8;
}

.header {
    position:relative;
    float:left;
    width:100%;
    height:100px;
    background-color:#999999;
}

.image {
    display: block;
    position: absolute;
    top:26px;           
    left: 20.06640625%;
    width: 196px;
    height: auto;
    overflow: hidden;
    top: 25px;
}

.linkedin {
    display:block;
    position:absolute;
    top:0;
    left:95px;
    width:25px;
    height:auto;
    overflow:hidden;
    z-index:7;
}

.logo {
    display:block;
    position:absolute;
    top:28px;
    left:17%;
    width:250px;
    height:auto;o
    verflow:hidden;
}

.pepsi {
    display:block;
    position:absolute;
    top:0;
    left:23.6229482323%;
    width:100px;
    height:auto;
    overflow:hidden;
    z-index:11;
}

.social {
    position:relative;
    float:left;
    width:15%;
    height:25px;
    margin:436px 0 0 12.79948%;
}

.twitter {
    display: block;
    position: absolute;
    top: 0;
    left: 46px;
    width: 25px;
    height: auto;
    overflow: hidden;
    z-index: 6;
}

.ups {
    display: block;
    float: left;
    width: 100px;
    height: auto;
    margin-left: 1.9847%;
    overflow: hidden;
}

.verizon {
    display:block;
    position:relative;
    float:left;
    z-index:12;
    width:100px;
    height:auto;
    margin-left:47.32086%;
    overflow:hidden;
}

._3m{display:block;position:absolute;top:0;left:0;z-index:10;width:100px;height:auto;overflow:hidden;}

.copywrite{
    float: left;
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #999999;
}

.copywrite{
    float: left;
    clear: both;
    width: 100%;
    height: 50px;
    background-color: #999999;
}

.copywrite-2 {
    position:absolute;
    top:850px;left:17%;
    width:39%;
    min-height:25px;
    line-height:1.38;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0px;
}

 </style>
</head>
<body class="body page-index clearfix">
  <div class="header"> <a href="http://www.issuetrak.com/"><img src="images/logo--trans.gif" alt="IssueTrak" class="logo"></a>
  </div>
  <div class="content">
    <div class="blurb"><h1>TRACK COMPLAINTS AND COMPLIMENTS</h1>
      <h2>Working with customers, you're guaranteed at least one complaint. But if you're tracking and resolving those complaints with IssueTrak, you may end up with more than one compliment!                 With IssueTrak, ensure faster customer response times and better quality control by centralizing your customer feedback!</h2>
      <br>
      <h1>SIMPLIFY THE PROCESS</h1>
      <h2>
        <ul>
          <li>Resolve issues by email or web portal</li>
          <li>Mobile access</li>
          <li>Easy to use and configure </li>
          <li>Award-winning Support Team</li>
        </ul>
      </h2></div>
    <div class="form"></div>
  </div>
  <div class="clients clearfix">
    <img src="images/client_logos/pepsi.png" alt="Pepsi uses Issuetrak" class="pepsi">
    <img src="images/client_logos/3M.png" alt="3M uses Issuetrak" class="_3m">
    <img src="images/client_logos/verizon.png" alt="Verizon uses Issuetrak" class="verizon">
    <img src="images/client_logos/ups.png" alt="UPS uses Issuetrak" class="ups">
  </div>
  <div class="social">
    <img src="images/social/gplus.png" alt="Find us on Google+" class="google">
    <img src="images/social/li.png" alt="Find us on LinkedIn" class="linkedin">
    <img src="images/social/t.png" alt="Find us on Twitter" class="twitter">
    <img src="images/social/fb.png" alt="Find us on Facebook" class="facebook">
  </div>
  <div class="about clearfix">
    <img src="images/Dan.jpg" alt="Dan Luhring - CEO" class="image" id="dan">
    <div class="blurb2"><h3>Welcome to IssueTrak</h3><br>
    <h4>IssueTrak is a fast-paced, agile software company based in the Hampton Roads area of
Virginia. We’ve a got a 20-year track record of successfully developing issue-tracking
and process management software for companies of all sizes. 

We’re stoked on innovation and we love data, and we’re harnessing the power of both to
develop a next generation product. We are a customer-centric company with a dedicated
vision of creating the most robust and versatile software solution for our clients.
And, we aren’t afraid to take risks to make this happen.</h4></div>
  </div>
  <footer class="copywrite"><span class="copywrite-2">&copy;2015 Issuetrak, Inc. All Rights Reserved</span></footer>
</body>
</html>

Answer 1

代码正常。
确保图像位于images/client_logos/文件夹中。另外，请确保图片名称和扩展名为ups.png。

Answer 2

使用Chrome开发工具并右键单击其中一个可见徽标，然后使用＆＃34;检查元素＆＃34;，然后在开发工具中找到UPS图像元素。看一下CSS的线索，了解它为什么没有显示出来。显示设置为无？它有高度和宽度吗？等...

缩小还可以显示指示布局问题的图像。您还可以单击开发工具中的图像链接以确保它在那里。或者检查网络选项卡以确保图像正在加载，如果没有从状态代码中获取原因。

您可能还需要确保加载任何外部CSS或JS文件而不是404。

请告诉我，如果这有帮助，你发现了什么，如果它没有解决你的问题，我会看到我能找到的其他内容。

图片已从显示中消失，但它已

2 个答案: