html - 图像从显示器上消失了，但它在那里

标签 html css

我决定试用金刚鹦鹉名为 Scarlet 的新程序。我设置了一个页面并且一切顺利，但是当我将代码移到 Dreamweaver 中时，图像消失了。我已经摆弄了几个小时了，我正在拔头发。这是基本的东西，我认为缺少 z-index，但是给它一个并没有改变问题。 CSS 在页面本身中，因为它是单页交易。 缺少的图像是 UPS Logo ，位于其他客户 Logo 旁边，排在最后。我会给你一个行号，但没有 :(

哪位好心人能告诉我我缺少什么吗？

    <!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>

最佳答案

代码没问题。
确保图像在images/client_logos/文件夹中。还要确保图像名称和扩展名是 ups.png。

关于html - 图像从显示器上消失了，但它在那里，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31105594/

上一篇：html - 如何使 <div> 高度等于其内容的组合高度

下一篇：javascript - 使控件位于我的幻灯片中并始终停留在同一位置

相关文章：

javascript - 如何在单独的窗口中打开 Pinterest 按钮？

html - 如何在 Opera 中使用 css 居中 <img> html 标签？

html - 嵌套的内联 block 不会正确换行

javascript - 下划线不正确的宽度

css - 是否有 "reverse general siblings"CSS 选择器？

CSS - 如何获取位置 : absolute; to work well with different screen sizes

javascript - 提醒 this.id 关键字返回未定义的 Javascript

html - 如何在绝对定位的文本上实现与分词相同的效果？

css - 为什么angularjs的嵌入会导致表格中的单元格分离(双边框)？

javascript - 如何将图像组合成堆栈

©2024 IT工具网  联系我们