HTML/CSS的背景颜色

问题描述：

我一直在玩弄网站找出他们的工作方式。通过下载它们并打开在梦中织布工cs6。但是当我在浏览器中打开下载的html文件时，除了绿色背景被替换为默认的白色背景之外，所有内容都可以正常显示。看一看。 http://www.bintrasher.com/index.html HTML/CSS的背景颜色

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- saved from url=(0036)http://www.bintrasher.com/index.html --> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 


<link type="text/css" rel="stylesheet" href="./Bintrasher1_files/style.css"> 
<title>Bintrasher</title> 
<style type="text/css"></style></head> 

<body> 

<div id="container"> 

    <div id="top_banner"><img src="./Bintrasher1_files/dragons_den.gif" alt="dragons den"></div> 
    <div id="nav"> 
     <ul> 
      <li><a href="./Bintrasher1_files/Bintrasher1.htm" class="selected">home</a></li> 
      <li>|</li> 
      <li><a href="http://www.bintrasher.com/domestic.html" class="main_link">domestic</a></li> 
      <li>|</li> 
      <li><a href="http://www.bintrasher.com/commercial.html" class="main_link">commercial</a></li> 
      <li>|</li> 
      <li><a href="http://www.bintrasher.com/videos.html" class="main_link">videos</a></li> 
      <li>|</li> 
      <li><a href="http://www.bintrasher.com/shop.html" class="main_link">shop</a></li> 
      <li>|</li> 
      <li><a href="http://www.bintrasher.com/contact.html" class="main_link">contact us</a></li> 
     </ul> 


    </div> 
    <div id="content"> 
     <div id="left_column"> 
      <h1 class="header_home">Gain 40% more space in your wheelie bin!</h1> 
      <p> 
      Now with the Bin Trasher you can compact up to 40% of your waste to reduce overfilling and littering. 
    </p><p> 
    The sheer amount of waste produced by each household every week is increasing and the dangerous task of standing in your bin to squash your rubbish may be over! 
    </p><p> 
    We might just have the answer to your problem. The Bin Trasher is a simple gadget that compacts the waste and gives you 40% more space in your wheelie bin. 


      </p> 


     </div> 
     <div id="right_column"><p>Watch our demonstration video now…</p> 
     <object width="360" height="290"><param name="movie" value="http://www.youtube.com/v/7aHbTdhtrho&amp;hl=en&amp;fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/7aHbTdhtrho&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="290"></object> 

     </div> 
    </div> 
    <div id="footer"> 
     <div id="col1"> 
       <p> 
       <strong>Trade Enquiries Welcome</strong><br> 
      <strong>Tel:</strong> 059 91 57629<br> 
      <strong>Mobile:</strong> 087 206 9546<br> 
      <strong>Email:</strong> <a href="maito:[email protected]">[email protected]</a></p> 
     </div> 
     <div id="col2"> 
       <p> 
       <strong class="firstline">Great Value at only </strong><br> 
       <strong>€49.95</strong><br> 
       <strong class="lastline">Including VAT</strong> 
       </p> 
     </div> 
     <div id="col3"><a href="http://www.bintrasher.com/shop.html"><img src="./Bintrasher1_files/buynow.gif"></a></div> 
    </div> 
    <p class="lower_left">Bin Trasher. 2010. All rights reserved </p> 
    <p class="lower_right">Terms &amp; Conditions | Privacy Policy | Site Map<br> 
    <a href="http://www.idea.ie/" target="_blank"><img src="./Bintrasher1_files/headers_26.gif"></a></p> 
</div> 





</body></html>

CSS：

@charset "UTF-8"; 
/* CSS Document */ 

img{border:0;} 

body {text-align:center; margin:23px 0; background:url(../images/bgr.gif); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.4em;} 



p a{color:#CC0000;} 
p a:hover{color:#3c671e;} 

#container {width:931px; margin-left:auto; margin-right:auto; text-align:left;} 


#top_banner {height:149px; background:url(../images/top_banner.gif) bottom no-repeat; text-align:right;} 

#nav {height:35px; background:url(../images/top_ban_bit.gif) no-repeat right #4a4a30; color:#FFFFFF;} 
#nav ul{list-style-type:none; margin:0; padding:0 0 0 10px;} 
#nav li{float:left; padding:6px 0.9em 0 0.9em; font-size:1.2em;} 

#content{background:#FFFFFF; overflow:hidden; border-bottom:dotted 2px #006633;} 



#left_column{ float:left; width:460px; padding:30px 30px;} 


#right_column{margin-left:520px; padding:30px 20px;} 

#footer{clear:both; background:#FFFFFF; overflow:hidden; padding:10px 20px 10px 30px; } 
#footer div{float:left; width:33%;} 

#col1 strong {color:#3c671e; text-transform:uppercase; font-weight:normal;} 

#col2 strong {color:#5c8424; font-size:4em; line-height:1.2em;} 
#col2 .firstline{color:#333333; font-size:1.6em;} 
#col2 .lastline{font-size:1em; color:#333333;} 

#col3 {text-align:right; padding-top:30px;} 

.main_link {color:#FFFFFF; text-decoration:none;} 
.main_link:hover, .selected{color:#669b41; text-decoration:none;} 

p.lower_left{float:left; font-size:0.8em; color:#FFFFFF;} 
p.lower_right{float:right; font-size:0.8em; color:#FFFFFF; text-align:right;} 

.header_home{background:url(../images/heading_home.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;} 
.header_industrial{background:url(../images/heading_industrial.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}

有可能是一个非常简单的答案，因为我很新的Web开发。在此先感谢。

您没有下载背景图片。 – MarcinJuraszek 2013-03-24 13:59:00

所以你想要那个绿色背景吗？？ – Sachin 2013-03-24 13:59:02

我只是混淆了为什么背景颜色不显示时，其余的图像显示。它从何而来？ – 2013-03-24 14:00:48

答

而不是

background：url（../ images/bgr.gif）;

你需要写

背景：网址（http://www.bintrasher.com/images/bgr.gif）;

谢谢，我无法接受你的答案4分钟。 – 2013-03-24 14:07:03

答

我猜，引用（css文件）丢失了。你有像服务器上一样的文件结构吗？我敢打赌，它会工作。

我只是“保存页面为>网页”我将如何获得？ – 2013-03-24 14:04:32

HTML/CSS的背景颜色

相关推荐