Question

我目前正在建立一个网站，我的代码一直很好。我在我的网页上添加了一个页脚，然后显示。但是，当我添加一个高度时，它根本不会改变。相反，它将页脚更改为白色。我也尝试过使用div和section（仅用于测试目的），但结果仍然相同。任何帮助，将不胜感激！这是代码：

</head>

<body> 

  <header>
    <img     src="http://i300.photobucket.com/albums/nn18/ojijimanuel/arms_of_the_catholic_archdiocese_of_birmingham_by_petercrawford-d727h3u_zpscfv7es7q.png"/>
    <h4 id="textlogo">St Philip Neri</h4>
    <nav>
      <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Contact</li></a>
      </ul>
    </nav>
  </header>


  <section id="section1">
    <h1 id="section1heading">Welcome to our multicultural society.</h1>
    <h4 id="section1paragraph">Come worship with us.</h4>
  </section>

  <section id="section2">
    <button type="button">View the Sunday Bulletin</button>
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer>
  </footer>

</body>

body{
margin:0px;
}

header{
background-color:#080808;
display: flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
}

img{
display:inline-block;
width:35px;
margin-left:100px;
}


#textlogo{
margin:0px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight:700;
display:inline-block;
margin:10px;
}

a{
color:white;
list-style-type:none;
text-decoration:none;
font-family:roboto,sans-serif;
font-weight:500;
font-size:15px;
}

nav{
margin-left:auto;
margin-right:100px;
}

nav li{
display:inline;
padding:5px;
}



#section1{
background-image:     url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_4_6279316354_    zpsgbpfsvo1.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:670px;
text-align:center;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
flex-direction:column;

}

#section1heading{
color:white;
font-size:50px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-weight:500;
display:block;
position:relative;
top:100px;

}

#section1paragraph{
color:white;
font-family:'Roboto', sans-serif;
font-weight:400;
font-size:20px;
position:relative;
top:100px;
}




#section2{
width:100%;
background-color:#cc1d00;
margin:0px;
padding-top:130px;
padding-bottom:130px;
text-align:center;
background-image:       url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_7_2748546790_    zpsc1alysjl.jpg");
background-position:center;
background-size:100%;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
height:50px;
}


button{
text-align:center;
border-color:white;
color:white;
background-color:transparent;
border-style:solid;
font-size:25px;
font-family: Roboto, sans-serif;
font-weight:500;
border-width:3.5px;
padding:10px;
}


button{
cursor: pointer; 
cursor: hand; 
}

#section3{
width:50%;
height:600px;
background-color:blue;
float:left;
}

#section4{
width:50%;
height:600px;
background-color:red;
float:right;
}

#footer{
width:100%;
background-color:orange;
margin:0px;
height:500px;
}

Answer 1

错误的CSS选择器，使用footer {代替#footer {
为页脚样式添加一个明确的修复，以避免在
部分后面显示它
footer { clear: left; ...

Answer 2

要查看您的页脚，请将其设置为float: left;，并定义height。

<强> CSS

footer{
  background: white;
  float: left;
  height: 200px;
}

我希望这会对你有所帮助。

修改

将此#footer移至footer。第一个是当你声明一个名为footer的id。

Answer 3

首先，请勿使用ID作为页脚标记，而不是#footer，请使用footer。其次，页脚似乎出现在各个部分后面，使用clear:both;来修复它。

请看下面的代码段：）

body{
margin:0px;
}

header{
background-color:#080808;
display: flex;
align-items:center; /* align vertical */
padding-top:10px;
padding-bottom:10px;
position:fixed;
width:100%;
z-index:1000;
}

img{
display:inline-block;
width:35px;
margin-left:100px;
}


#textlogo{
margin:0px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight:700;
display:inline-block;
margin:10px;
}

a{
color:white;
list-style-type:none;
text-decoration:none;
font-family:roboto,sans-serif;
font-weight:500;
font-size:15px;
}

nav{
margin-left:auto;
margin-right:100px;
}

nav li{
display:inline;
padding:5px;
}



#section1{
background-image:     url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_4_6279316354_    zpsgbpfsvo1.jpg");
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width:100%;
height:670px;
text-align:center;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
flex-direction:column;

}

#section1heading{
color:white;
font-size:50px;
margin:0px;
font-family: 'Roboto', sans-serif;
font-weight:500;
display:block;
position:relative;
top:100px;

}

#section1paragraph{
color:white;
font-family:'Roboto', sans-serif;
font-weight:400;
font-size:20px;
position:relative;
top:100px;
}




#section2{
width:100%;
background-color:#cc1d00;
margin:0px;
padding-top:130px;
padding-bottom:130px;
text-align:center;
background-image:       url("http://i300.photobucket.com/albums/nn18/ojijimanuel/imageedit_7_2748546790_    zpsc1alysjl.jpg");
background-position:center;
background-size:100%;
display: flex;
align-items:center; /* align vertical */
justify-content:center;
height:50px;
}


button{
text-align:center;
border-color:white;
color:white;
background-color:transparent;
border-style:solid;
font-size:25px;
font-family: Roboto, sans-serif;
font-weight:500;
border-width:3.5px;
padding:10px;
}


button{
cursor: pointer; 
cursor: hand; 
}

#section3{
width:50%;
height:600px;
background-color:blue;
float:left;
}

#section4{
width:50%;
height:600px;
background-color:red;
float:right;
}

footer{
width:100%;
background-color:orange;
margin:0px;
height:500px;
clear: both;

}

<body> 

  <header>
    <img     src="http://i300.photobucket.com/albums/nn18/ojijimanuel/arms_of_the_catholic_archdiocese_of_birmingham_by_petercrawford-d727h3u_zpscfv7es7q.png"/>
    <h4 id="textlogo">St Philip Neri</h4>
    <nav>
      <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Contact</li></a>
      </ul>
    </nav>
  </header>


  <section id="section1">
    <h1 id="section1heading">Welcome to our multicultural society.</h1>
    <h4 id="section1paragraph">Come worship with us.</h4>
  </section>

  <section id="section2">
    <button type="button">View the Sunday Bulletin</button>
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer>
  </footer>

</body>

页脚样式问题

3 个答案: