2014-05-12 46 views
-2

我想使用html背景和身体背景为不同。当我使用主体颜色时,它不覆盖索引页的整个页面。但它正在为其他页面工作! 这里是我的代码:身体背景does'nt填充整页

 <!DOCTYPE html> 
    <html lang="en"> 
<head> 
    <meta charset = "UTF-8"> 
    <title>Welcome to NY All STAR's offical website</title> 
    <meta name ="Description" content="NYAS"> 
    <meta name="Description" content = "A_New_York_based_cricket_club"> 
    <meta name="tag" content ="NYPCL,nyas"> 
    <meta name ="tag" content="cricket"> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
    <link rel="stylesheet" type="text/css" href="home.css"> 


</head> 

    <body> 

    <header> 
    <img src="images/logo.png" width=1200 height=300 alt="All star"> 
    </header> 
    <br> 
    <nav class="navv"> 
     <ul class="nav-list"> 
     <li id="current" class="nav-item"><a href="index.html">HOME</a> 
     </li> 
     </ul> 

     <ul class="nav-list"> 
      <li class="nav-item"><a href="#">PLAYERS</a> 
       <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="abir.html">Abir Khan</a></li> 
       <li class="nav-submenu-item"><a href="afzal.html">Afzal Hossain</a> </li> 
       <li class="nav-submenu-item"><a href="polash.html">Ashfaqur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="ashraf.html">Ashrafur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="azad.html">Azad Ahmed</a></li> 
       <li class="nav-submenu-item"><a href="jibran.html">Jibran Khan</a></li> 
       <li class="nav-submenu-item"><a href="junayed.html">Junayed Ahmed</a></li> 
       <li class="nav-submenu-item"><a href="korban.html">Korban Ali</a></li> 
       <li class="nav-submenu-item"><a href="shaikot.html">MD. Shaikot Alom</a></li> 
       <li class="nav-submenu-item"><a href="tanmoy.html">MD Tanmoy Hossain</a></li> 
       <li class="nav-submenu-item"><a href="suleman.html">Mohammed Suleman</a></li> 
       <li class="nav-submenu-item"><a href="monju.html">Monirul Haque</a></li> 
       <li class="nav-submenu-item"><a href="monju.html">Monjur Hussain</a></li> 
       <li class="nav-submenu-item"><a href="maju.html">Muazam Hussain</a></li> 
       <li class="nav-submenu-item"><a href="mustafizur.html">Mustafizur Rahman</a></li> 
       <li class="nav-submenu-item"><a href="pervej.html">Pervej Rahman</a></li> 
       <li class="nav-submenu-item"><a href="prashant.html">Prashant Nair</a></li> 
       <li class="nav-submenu-item"><a href="shuvo.html">Rakib Shuvo</a></li> 
       <li class="nav-submenu-item"><a href="sami.html">Sami Chowdhury</a></li> 
       <li class="nav-submenu-item"><a href="sanjil.html">Sanjil Chowdhury</a></li> 
       <li class="nav-submenu-item"><a href="saqif.html">Saqif Haider</a></li> 
       </ul> 
      </li>  
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="news.html">NEWS</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="schedule.html">SCHEDULE</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="result.html">RESULT</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="stats.html">STATS</a> 
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="#">MEDIA</a> 
      <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="?=submenu-1">PHOTO</a></li> 
       <li class="nav-submenu-item"><a href="?=submenu-2">VIDEO</a></li> 
      </ul>  
     </li> 
     </ul> 
     <ul class="nav-list"> 
     <li class="nav-item"><a href="links.html">LINKS</a> 
     </li> 
     </ul> 

     <ul class="nav-list"> 
     <li class="nav-item"><a href="#">LIVE STREAM</a> 
      <ul class="nav-submenu"> 
       <li class="nav-submenu-item"><a href="livecricket.html">LIVE CRICKET</a></li> 
       <li class="nav-submenu-item"><a href="banglaradio.html">LIVE RADIO</a></li> 
      </ul>  
     </li> 
     </ul> 

     <ul class="nav-list"> 
     <li class="nav-item"><a href="about.html">ABOUT US</a> 
     </li> 
     </ul>  

<aside > 
    <div class="widget" > 
    <p><script type="text/javascript" src="http://voap.weather.com/weather/oap/USNY0996?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script></p> 
    </div> 
</aside> 

      <!--Beginning of photo Slideshow --> 
    <div class ="left"> <!--bordered slideshow here--> 

    <ul class="slides"> 
    <input type="radio" name="radio-btn" id="img-1" checked /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_1.jpg" /> 
     <div class="caption"> 
    <h2>T-20 Champion 2013</h2> 
    </div> 
    </div> 
    <div class="nav"> 
     <label for="img-6" class="prev">&#x2039;</label> 
     <label for="img-2" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-2" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_2.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-1" class="prev">&#x2039;</label> 
     <label for="img-3" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-3" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_3.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-2" class="prev">&#x2039;</label> 
     <label for="img-4" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-4" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_4.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-3" class="prev">&#x2039;</label> 
     <label for="img-5" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-5" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_5.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-4" class="prev">&#x2039;</label> 
     <label for="img-6" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <input type="radio" name="radio-btn" id="img-6" /> 
    <li class="slide-container"> 
    <div class="slide"> 
     <img src="images/slideshow/img_6.JPG" /> 
    </div> 
    <div class="nav"> 
     <label for="img-5" class="prev">&#x2039;</label> 
     <label for="img-1" class="next">&#x203a;</label> 
    </div> 
    </li> 

    <li class="nav-dots"> 
    <label for="img-1" class="nav-dot" id="img-dot-1"> 
    </label> 
    <label for="img-2" class="nav-dot" id="img-dot-2"> 

    </label> 
    <label for="img-3" class="nav-dot" id="img-dot-3"> 
    </label> 
    <label for="img-4" class="nav-dot" id="img-dot-4"> 
    </label> 
    <label for="img-5" class="nav-dot" id="img-dot-5"> 
    </label> 
    <label for="img-6" class="nav-dot" id="img-dot-6"> 
    </label> 
    </li> 
    </ul> 
    </div> 

    <!--End of Photo Slideshow --> 

    <br> 
<section > 
    <div class="welcome"> 
    <h3>Welcome to NYAS</h3> 
    <p> 
     <em>NY All STAR</em> is a cricket club which is made up of young      cricketers 
     who are highly determined and focused in their game. This club 
     joined BCANA League in 2011. 
    </p> 
    <p> In 2013, NY All STAR Participated in NYPCL and won the t20 first division league. They also became the League <b>Runners-up</b> of Division A. 
    </p> 
    </div> 
</section> 

<br> 
<footer> 
<!-- footer --> 

<div id="f" class="clearfix"> 
    <div class="col"> 
    <ul class="btm-left"> 
     <li><img src="images/logo.png" height="150" width="160"/></li> 
    </ul> 
    </div> 
    <div class="col"> 

     <ul class="btm-center"> 
      <li><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fnyascc&amp;width=450&amp;height=395&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=true&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:395px;" allowTransparency="true"></iframe></li> 
     </ul> 
    </div> 
    <div class="col"> 

    <ul class="btm-right"> 
     <li><b>Links</b></li> 
     <li><a href="#">HOME</a></li> 
     <li><a href="news.html">NEWS</a></li> 
     <li><a href="schedule.html">SCHEDULE</a></li> 
     <li><a href="result.html">RESULT</a></li> 
     <li><a href="stats.html">STATS</a></li> 
     <li><a href="#">PLAYERS</a></li> 
     <li><a href="links.html">LINKS</a></li> 
     <li><a href="livecricket.html">LIVE CRICKET</a></li> 
     <li><a href="banglaradio.html">LIVE RADIO</a></li> 
     <li><a href="about.html">ABOUT US</a></li> 
    </ul> 
    </div> 
</div> 
</footer> 
<!-- @end footer --> 

    </body> 

    </html> 

CSS代码是在这里:

body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
border: 2px solid black; 
background: #F0F0F0; 
background-size: cover; 
    font-size: 87.5%; 
width: 1200px; 
margin-left: 15px; 
margin: 15px auto; 
padding: 15px 25px; 
display: block; 
border: 1px solid black; 
} 

请给我一个解决方案为什么会发生。

这里是一个链接,你可以看看:http://cst2309.hostei.com/

谢谢

+0

可能您能寄出小提琴链接? – Manjuboyz

+1

它是一个繁琐的工作来复制您的问题。至少尝试并将其反映为[** Fiddle **](http://jsfiddle.net/)或[** Bin **](http://jsbin.com/)。 – Shubh

+0

这里是我的项目的链接:http://cst2309.hostei.com/ – user3314714

回答

1

这是发生,因为你给了保证金15px的身体。不要给身体留下任何保证金或填充物。而是给它里面的元素提供填充和边距。

+0

如果我不使用保证金,那么身体不停留在屏幕中间。我尝试用保证金,但没有什么好 – user3314714

+0

试试这.. 。创建一个div后面的正文,包含所有内容,为此div应用此CSS边距:0 auto;这应该工作。并删除身体宽度,并把它给这个div。并且还给这个div赋予背景色而不是身体。 –

0

您没有结束标签。这可能是浏览器试图为每个主标签找到省略标签的情况。试试这个:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset = "UTF-8"> 
<title>Welcome to NY All STAR's offical website</title> 
<meta name ="Description" content="NYAS"> 
<meta name="Description" content = "A_New_York_based_cricket_club"> 
<meta name="tag" content ="NYPCL,nyas"> 
<meta name ="tag" content="cricket"> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<link rel="stylesheet" type="text/css" href="home.css"> 


</head> 

<body> 

<header> 
<img src="images/logo.png" width=1200 height=300 alt="All star"> 
</header> 
<br> 
<nav class="navv"> 
<ul class="nav-list"> 
    <li id="current" class="nav-item"><a href="index.html">HOME</a> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="#">PLAYERS</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="abir.html">Abir Khan</a></li> 
      <li class="nav-submenu-item"><a href="afzal.html">Afzal Hossain</a> </li> 
      <li class="nav-submenu-item"><a href="polash.html">Ashfaqur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="ashraf.html">Ashrafur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="azad.html">Azad Ahmed</a></li> 
      <li class="nav-submenu-item"><a href="jibran.html">Jibran Khan</a></li> 
      <li class="nav-submenu-item"><a href="junayed.html">Junayed Ahmed</a></li> 
      <li class="nav-submenu-item"><a href="korban.html">Korban Ali</a></li> 
      <li class="nav-submenu-item"><a href="shaikot.html">MD. Shaikot Alom</a></li> 
      <li class="nav-submenu-item"><a href="tanmoy.html">MD Tanmoy Hossain</a></li> 
      <li class="nav-submenu-item"><a href="suleman.html">Mohammed Suleman</a></li> 
      <li class="nav-submenu-item"><a href="monju.html">Monirul Haque</a></li> 
      <li class="nav-submenu-item"><a href="monju.html">Monjur Hussain</a></li> 
      <li class="nav-submenu-item"><a href="maju.html">Muazam Hussain</a></li> 
      <li class="nav-submenu-item"><a href="mustafizur.html">Mustafizur Rahman</a></li> 
      <li class="nav-submenu-item"><a href="pervej.html">Pervej Rahman</a></li> 
      <li class="nav-submenu-item"><a href="prashant.html">Prashant Nair</a></li> 
      <li class="nav-submenu-item"><a href="shuvo.html">Rakib Shuvo</a></li> 
      <li class="nav-submenu-item"><a href="sami.html">Sami Chowdhury</a></li> 
      <li class="nav-submenu-item"><a href="sanjil.html">Sanjil Chowdhury</a></li> 
      <li class="nav-submenu-item"><a href="saqif.html">Saqif Haider</a></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="news.html">NEWS</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="schedule.html">SCHEDULE</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="result.html">RESULT</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="stats.html">STATS</a> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="#">MEDIA</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="?=submenu-1">PHOTO</a></li> 
      <li class="nav-submenu-item"><a href="?=submenu-2">VIDEO</a></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav-list"> 
    <li class="nav-item"><a href="links.html">LINKS</a> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="#">LIVE STREAM</a> 
     <ul class="nav-submenu"> 
      <li class="nav-submenu-item"><a href="livecricket.html">LIVE CRICKET</a></li> 
      <li class="nav-submenu-item"><a href="banglaradio.html">LIVE RADIO</a></li> 
     </ul> 
    </li> 
</ul> 

<ul class="nav-list"> 
    <li class="nav-item"><a href="about.html">ABOUT US</a> 
    </li> 
</ul> 
</nav> 
<aside > 
    <div class="widget" > 
     <p><script type="text/javascript" src="http://voap.weather.com/weather/oap/USNY0996?template=GENXH&par=3000000007&unit=0&key=twciweatherwidget"></script></p> 
    </div> 
</aside> 

<!--Beginning of photo Slideshow --> 
<div class ="left"> <!--bordered slideshow here--> 

    <ul class="slides"> 
     <input type="radio" name="radio-btn" id="img-1" checked /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_1.jpg" /> 
       <div class="caption"> 
        <h2>T-20 Champion 2013</h2> 
       </div> 
      </div> 
      <div class="nav"> 
       <label for="img-6" class="prev">&#x2039;</label> 
       <label for="img-2" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-2" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_2.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-1" class="prev">&#x2039;</label> 
       <label for="img-3" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-3" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_3.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-2" class="prev">&#x2039;</label> 
       <label for="img-4" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-4" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_4.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-3" class="prev">&#x2039;</label> 
       <label for="img-5" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-5" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_5.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-4" class="prev">&#x2039;</label> 
       <label for="img-6" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-6" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="images/slideshow/img_6.JPG" /> 
      </div> 
      <div class="nav"> 
       <label for="img-5" class="prev">&#x2039;</label> 
       <label for="img-1" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <li class="nav-dots"> 
      <label for="img-1" class="nav-dot" id="img-dot-1"> 
      </label> 
      <label for="img-2" class="nav-dot" id="img-dot-2"> 

      </label> 
      <label for="img-3" class="nav-dot" id="img-dot-3"> 
      </label> 
      <label for="img-4" class="nav-dot" id="img-dot-4"> 
      </label> 
      <label for="img-5" class="nav-dot" id="img-dot-5"> 
      </label> 
      <label for="img-6" class="nav-dot" id="img-dot-6"> 
      </label> 
     </li> 
    </ul> 
</div> 

<!--End of Photo Slideshow --> 

<br> 
<section > 
    <div class="welcome"> 
     <h3>Welcome to NYAS</h3> 
     <p> 
      <em>NY All STAR</em> is a cricket club which is made up of young      cricketers 
      who are highly determined and focused in their game. This club 
      joined BCANA League in 2011. 
     </p> 
     <p> In 2013, NY All STAR Participated in NYPCL and won the t20 first division league. They also became the League <b>Runners-up</b> of Division A. 
     </p> 
    </div> 
</section> 

<br> 


</body> 

</html> 
+0

我编辑了mypost一点点。问题开始时,我添加页脚页面。请看这个链接http://cst2309.hostei.com – user3314714