浮动不工作，第二个背景图像没有注册为背景，居中的东西？

Posted 2023-03-04

【中文标题】浮动不工作，第二个背景图像没有注册为背景，居中的东西？

【英文标题】：Floats not working, Second Background Image not registering as a background, Centering things?

【发布时间】：2018-09-28 08:56:11

【问题描述】：

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

我正在尝试为明天到期的课程制作网页，但我正在努力让我的所有东西都正确定位。我在 Photoshop 中为我想要实现的目标做了一个模型设计，但实际实现它已经超出了令人沮丧的范围。

大多数花车都不起作用（可能是我的错，因为我很难理解这个概念）。

我还制作了第二张背景图片，但我认为它注册为正常图片。

还有一串代码我可以用来把所有东西都放在我的模型中吗？

How its suppose to look

How mine looks

我的代码：

/*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" >
                 <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" >
                  </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" > 
    </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" > 
        <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" >
        <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" >
        <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" >
        <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" >
   <img src="img/sponsor2.png" >
    <img src="img/sponsor3.png" >
     <img src="img/sponsor4.png" >
      <img src="img/sponsor5.png" >
    </footer>

感谢您的帮助

【问题讨论】：

你能用sn-ps吗？ (<>)

是的，抱歉，只是想弄清楚如何进行 sn-p。正如我所说，抱歉，我不是很懂技术。

【参考方案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 h1float:left;width: 70%;margin: 5px 0;text-align: left;
.article pfloat:left;width: 70%;margin: 5px 0;text-align: left;
h1text-align: left;
footerdisplay: block;width: 100%;float: left;

  <div class="container">
          <header class="Team Sky">
              <nav class="site-navigation">
                  <img src="img/TeamSkyLogo.png" >
                   <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" >
                    </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" >
      </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" >
          <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" >
          <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" >
     <img src="img/sponsor2.png" >
      <img src="img/sponsor3.png" >
       <img src="img/sponsor4.png" >
        <img src="img/sponsor5.png" >
      </footer>

      </div>

【讨论】：

这真的很有帮助。再次抱歉，我的代码很草率，我在这方面不是最好的，再次感谢你帮助我。

希望对您有所帮助，只使用一个类文章并根据您的要求更改css