个人中心
gpt4 book ai didi

html - 为什么图像没有显示在我的 Rails 应用程序中？

转载 作者：行者123 更新时间：2023-11-28 04:01:48 25 4
gpt4 key购买 nike

我使用免费模板制作了一个简单的网站。我很困惑，因为我的版本上的图像没有显示，但演示版本上的图像可以正常工作，并且两者具有完全相同的 css 文件和 html，因为我复制粘贴了。我将在下面发布它们。我的困惑在于我没有看到 html 或 css 样式表中提到的任何图像。图片有样式，但没有指向文件位置的链接。 2 个问题。

网站应该是这样的:

http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/

这是我的网站的样子:

https://cherry-cupcake-30790.herokuapp.com/

如您所见，背景、导航栏背景和主图像缺失，但实现了其他样式和 CSS。

  1. 为什么我的版本没有显示图片？
  2. 为什么演示版 0 上显示的图像似乎没有提及图像的实际文件位置(仅图像样式)？

谢谢。

html文件:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>

<body>
<div id="container">
        <div id="mainpic">
            <h1>Green<span class="off">Mountain</span></h1>
            <h2>A template by Bryant Smith</h2>
        </div>   

        <div id="menu">
            <ul>
                <li class="menuitem"><a href="#">Home</a></li>
                <li class="menuitem"><a href="#">About</a></li>
                <li class="menuitem"><a href="#">Products</a></li>
                <li class="menuitem"><a href="#">Services</a></li>
                <li class="menuitem"><a href="#">Design</a></li>
              <li class="menuitem"><a href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
          <h3>Template Notes</h3>
            <p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like.  If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find &quot;#mainpic h1&quot; in style.css and modify it's &quot;left&quot; and &quot;top&quot; properties, this is also true for the h2 tag.</p>
            <p>&nbsp;</p>
<h3>More information</h3>
            <p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
            <p>&nbsp;</p>
            <h3>Template Notes</h3>
            <p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like.  If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find &quot;#mainpic h1&quot; in style.css and modify it's &quot;left&quot; and &quot;top&quot; properties, this is also true for the h2 tag.</p>
            <p>&nbsp;</p>
            <h3>More information</h3>
            <p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
<p>&nbsp;</p>

            <div id="footer"><h3><a href="http://www.bryantsmith.com">florida web design</a></div>
      </div>
   </div>
</body>
</html>

CSS文件:

/* A Free Design by Bryant Smith (bryantsmith.com) */



body {
    margin: 0;
    padding: 0;
    text-align: left;
    font: 12px Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #061C37;
    background: #EEEFE4;
    background-image:url(images/background.png);
    background-repeat:repeat-x;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#container
{
  display: block; 
  height:auto;
  position: relative; 
  width: 940px;
}

#mainpic h1
{
    position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF; 
left:60px;
top:20px;
}


#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;  
left:60px;
top:50px;
}

#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;   
}



.off
{
color:#3A6028;

}




#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}

#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}

#footer
{
width:inherit;
height:auto;
}

#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}


#menu ul {
    list-style: none;
    padding: 0px;
    margin-left:auto;
    width:900px;
}

#menu li {
    list-style: none;
    padding: 0px;   
    display: inline; 

}

#menu a {
    float: left;
    width: 150px;
    height: 40px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    padding-top: 17px;
    font-size: 15px;
}

#menu a:hover{
    color:#BEE399;
}

#content p
{

}


html, body {
text-align: center;
}
p {text-align: left;}




  [1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/

最佳答案

对于问题1，因为你网站的css是空的，什么都没有。css链接是https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css .

对于问题2，图片链接引用不在html中，而是在css文件中。

#mainpic {
  background-image: url(images/main.jpg);
  background-repeat: no-repeat;
  width: 900px;
  height: 354px;
}

图片链接是http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg

关于html - 为什么图像没有显示在我的 Rails 应用程序中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43167457/

25 4 0
文章推荐： c++ - 互斥锁困惑
文章推荐： css - Bootstrap 容器获取 margin-top 0
文章推荐： jquery - JavaScript for 循环增量不起作用
文章推荐： html - 平均分离2个div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com