浮动不起作用，第二个背景图像未注册为背景，居中事物

Question

所以首先让我指出，我根本不精通技术。我发现大多数计算机都很困难，除非我需要它从大学毕业，否则我不会参加这门课。

我

正在尝试为明天到期的课程制作一个网页，我正在努力正确放置我所有的东西。我在 photoshop 中为我想要实现的目标制作了一个模型设计，但实际上实现它已经超出了麻烦。

大多数浮标都不起作用(可能是我的错，因为我正在努力理解这个概念(。

我还制作了一个辅助背景图像，但我认为它注册为普通背景图像。

还有一串代码可以用来像在我的模型中一样居中吗？

它应该是什么样子

我的长相

我的代码：

/*The Main Background*/
body {
     background-image: url(../img/background.png);
    background-repeat: repeat-x;
} 
#HeaderImage{
    background-image: url(../img/HeaderImage.png);
    background-repeat: no-repeat;
     z-index: 1;
     background-position: left; 
}
.container {
    width: 960px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    line-height: 1.5;
    text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
    height: 155px;
}
.site-navigation img {
    margin-top: 16px;
    float:left;
}
.site-navigation ul {
    width: 490px;
    margin: 0 auto;
}
.site-navigation li {
    margin: 35px 33px;
    float: left;
}
.site-navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.site-navigation a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
}
/* Header Element */
h2 {
    line-height: 0.8;
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    width: 450px;
    border-bottom: 1px solid #d9d9d9;
    margin: auto;
    margin-top: 115px;
    padding-bottom: 42px;
}
.search{
}
.SearchGlass{
    float: left;
    position: top;
}

    <div class="container"></div>
        <header class="Team Sky">
            <nav class="site-navigation">
                <img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
                 <ul class="clearfix">
                    <li><a href="#">shop</a></li>
                    <li><a href="#">checkout</a></li>
                    <li><a href="#">video</a></li>
                </ul>
                <!-- SEARCH BAR AND MAGNIFYING GLASS!--> 
                  <div class="SearchGlass" id="SearchGlass">
                  <img src="img/magnifyingglass.png" alt="Magnifying Glass">
                  </div>
                     <form>
                     <div class="search"> 
                        <!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
                        <label for="search">search</label> 
                        <input id="search" type="text" name="search"/>
                    </div>
                </form>
                </nav>

                <div id="HeaderImage">
        <img src="img/HeaderImage.png" alt="Dude on a bike"> 
    </div>
                    <!-- need to close your form element -->    
            <div class="TeamSkylogo">
            <h2>Team Sky</h2>
            </div>
            <div class="RoadToYellow">
            <P>the road to yellow</P>
            </div>
             <!--Shop Team Sky-->
        <main>
        <h1> TEAM NEWS </h1>
        <!-- each article/blog should be in it's own container -->
        <div class="articleone">
        <img src="img/ArticleImageOne.png" alt="Water"> 
        <h1>Giro d'Italia</h1>
        <P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
        <!--readon !-->
        </div>
        <div class="articletwo">
        <img src="img/ArticleImageTwo.png" alt="Bikes by River">
        <h1>Krudder Gets a Break</h1>
        <P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
        <!--readon !-->
        </div>
        <div>
        <img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
        <h1>Kinnick's New Contract</h1>
        <P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
        <!--readon !-->
        </div>
        <div class="articlefour">
        <img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
        <h1>Froom In Third</h1>
        <P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
        <!--readon !-->
        </div>
    </main>
<footer>
    <img src="img/sponsor1.png" alt="Team Sky Sponsor">
   <img src="img/sponsor2.png" alt="Pinarello">
    <img src="img/sponsor3.png" alt="Shimano">
     <img src="img/sponsor4.png" alt="Rayha">
      <img src="img/sponsor5.png" alt="21ST Century Fox">
    </footer>

谢谢你的帮助

Answer 1

这可能会对您有所帮助，但是上面给出的代码中存在很多问题，希望您能正确处理，暂时尝试此代码

body {
     background-image: url(../img/background.png);
    background-repeat: repeat-x;
}
#HeaderImage{
    background-image: url(../img/HeaderImage.png);
    background-repeat: no-repeat;
     z-index: 1;
     background-position: left;
}
.container {
    width: 960px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    line-height: 1.5;
    text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
    height: 155px;
}
.site-navigation img {
    margin-top: 16px;
    float:left;
}
.site-navigation ul {
    width: 490px;
    margin: 0 auto;
}
.site-navigation li {
    margin: 35px 33px;
    float: left;
}
.site-navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
.site-navigation a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
}
/* Header Element */
h2 {
    line-height: 0.8;
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    width: 450px;
    border-bottom: 1px solid #d9d9d9;
    margin: auto;
    margin-top: 115px;
    padding-bottom: 42px;
}
.search{
}
.SearchGlass{
    float: left;
    position: top;
}
.article{
  float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}

  <div class="container">
          <header class="Team Sky">
              <nav class="site-navigation">
                  <img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
                   <ul class="clearfix">
                      <li><a href="#">shop</a></li>
                      <li><a href="#">checkout</a></li>
                      <li><a href="#">video</a></li>
                  </ul>
                  <!-- SEARCH BAR AND MAGNIFYING GLASS!-->
                    <div class="SearchGlass" id="SearchGlass">
                    <img src="img/magnifyingglass.png" alt="Magnifying Glass">
                    </div>
                       <form>
                       <div class="search">
                          <!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
                          <label for="search">search</label>
                          <input id="search" type="text" name="search"/>
                      </div>
                  </form>
                  </nav>

                  <div id="HeaderImage">
          <img src="img/HeaderImage.png" alt="Dude on a bike">
      </div>
                      <!-- need to close your form element -->
              <div class="TeamSkylogo">
              <h2>Team Sky</h2>
              </div>
              <div class="RoadToYellow">
              <P>the road to yellow</P>
              </div>
               <!--Shop Team Sky-->
          <div>
          <h1> TEAM NEWS </h1>
          <!-- each article/blog should be in it's own container -->
          <div class="article">
          <img src="http://via.placeholder.com/600x500" alt="Water">
          <h1>Giro d'Italia</h1>
          <P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
          <!--readon !-->
          </div>
          <div class="article">
          <img src="http://via.placeholder.com/600x500" alt="Water">
          <h1>Giro d'Italia</h1>
          <P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
          <!--readon !-->
          </div>

      </div>
  <footer>
      <img src="img/sponsor1.png" alt="Team Sky Sponsor">
     <img src="img/sponsor2.png" alt="Pinarello">
      <img src="img/sponsor3.png" alt="Shimano">
       <img src="img/sponsor4.png" alt="Rayha">
        <img src="img/sponsor5.png" alt="21ST Century Fox">
      </footer>
      </div>