2017-04-02 106 views
0

我做了一個簡單的網站,使用免費的模板。我很困惑,因爲我的版本的圖像沒有顯示,但演示版本上的圖像正在工作,並且都有完全相同的CSS文件和HTML,因爲我複製粘貼。我會在下面發表。我的困惑在於,我沒有看到HTML或CSS樣式表中的任何圖像。樣式在圖像中,但沒有鏈接到文件位置。 2個問題。爲什麼圖像沒有顯示在我的Rails應用程序中?

這是網站應該是什麼樣子:

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

這是我的網站看起來像:

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

,你可以看到背景,背景,導航欄和主圖像丟失,但其他樣式和css被實現。

  1. 爲什麼圖像沒有顯示在我的版本上?
  2. 爲什麼在演示版本上顯示圖像時,似乎沒有提及圖像的實際文件位置(僅圖像的樣式)?

謝謝。

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/ 

回答

0

的問題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

+0

是我不好對數2.我現在看到的引用。然而,你的意思是我的CSS是空的?請你詳細說明一下。據我看到我有一個CSS文件在我的Rails應用程序樣式表文件夾中,這應該包括在網站沒有? – Owen

+0

請再次嘗試網站鏈接。我以前沒有推到heroku。它的固定現在,你可以看到除圖像外所有的樣式。 https://cherry-cupcake-30790.herokuapp.com/ – Owen

+0

我的意思是根據鉻devtools,你的網站確實有一個應用程序的CSS文件包括,但它沒有內容,只是空的。我想你把一個css文件放在樣式表中,但是你沒有把它包含在application.css中。 –

相關問題