身体背景不会填满整页

时间:2014-05-12 06:01:44

标签: html css background

我正在尝试使用html背景和身体背景作为不同。当我使用体色时,它不会覆盖索引页面的整个页面。但它适用于其他页面! 这是我的代码:

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

谢谢

2 个答案:

答案 0 :(得分:1)

这种情况正在发生,因为你给身体提供了15px的保证金。不要给身体任何边缘或填充物。而是为其中的元素提供填充和边距。

答案 1 :(得分: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>