嵌入式CSS无法正常工作

时间:2015-11-17 18:08:01

标签: html css position footer

所以我试图让我的页脚始终保持在底部,但仅针对一个特定页面,而不是整个网站。为此,我使用了嵌入式CSS(在head标签内)并且它没有用。我在主css中粘贴了相同的代码并且它有效。 请帮我解决这个问题。这是代码:



/*this works*/
body{
	margin: 0 auto;
	margin-top: -19vh;
	padding: 0;
	font-family: Caviar, "Times New Roman", sans-serif;
	float: clear;
	width: auto;
}
footer {
  font-style: italic;
  font-size: 0.9em;
  z-index: 10;
  text-align: center;
  background-color: #FFFF3D;
}
footer a{
	color: #000000;
}
footer a:hover{
	text-decoration: none;
}

<!doctype html>
<html lang="en">

<head>
  <title>About.</title>
  <meta charset="UTF-8">
  <link href="style.css" rel="stylesheet" type="text/css">

   
  <style>
  <!--very specific small CSS for this document-->
	footer{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
  </style>
</head>
<!--big header-->
    <header>
      <h1 id="mainHeading">Check</h1>
    </header>
<!--close Big header-->

<!--Small Header-->
    <div id="headerSmall">
      <div id="hOneSmall">Check</div>
    </div>
<!--close small header-->

      <div id="background_one">
        <div class="small_head">About.</div>
		<br><br> <span style="font-size: 1.2em;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in laoreet orci. Vestibulum tortor justo, fringilla quis ante vitae, finibus efficitur neque. Duis semper dui nec ornare accumsan. Vestibulum vel cursus neque, sed viverra magna. Praesent vel velit nec velit rhoncus varius eu in nunc. Suspendisse convallis ante sit amet nulla hendrerit condimentum. Etiam placerat a turpis a dignissim. Praesent pretium dolor sit amet condimentum mattis. Quisque condimentum id neque dapibus hendrerit. Vivamus et metus nulla. Donec interdum velit in tellus gravida lobortis. Morbi lacinia venenatis elementum.<br></span><br>
		
		<span style="font-size: 0.8em; text-decoration: italic;">Got a suggest that we could add to our website? Or found any information that is incorrect? Please feel free to contact us at <a href="check.gmail.com">Check</a></span>
      </div>      <!--bg 1-->
    <footer>
      <div>
        <a href="validation/citation.pdf" target= "_blank">Citations</a>
        <br>Copyright &copy; owned by Student of College
      </div>
    </footer>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

CSS中的注释将像这样写

/* very specific small CSS for this document */

<!--very specific small CSS for this document-->

更正版本:

/*this works*/
body{
  margin: 0 auto;
  margin-top: -19vh;
  padding: 0;
  font-family: Caviar, "Times New Roman", sans-serif;
  float: clear;
  width: auto;
}
footer {
  font-style: italic;
  font-size: 0.9em;
  z-index: 10;
  text-align: center;
  background-color: #FFFF3D;
}
footer a{
  color: #000000;
}
footer a:hover{
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>About.</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">


    <style>
      /*very specific small CSS for this document*/
      footer{
        position: fixed;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <!--big header-->
  <header>
    <h1 id="mainHeading">Check</h1>
  </header>
  <!--close Big header-->

  <!--Small Header-->
  <div id="headerSmall">
    <div id="hOneSmall">Check</div>
  </div>
  <!--close small header-->

  <div id="background_one">
    <div class="small_head">About.</div>
    <br><br> <span style="font-size: 1.2em;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in laoreet orci. Vestibulum tortor justo, fringilla quis ante vitae, finibus efficitur neque. Duis semper dui nec ornare accumsan. Vestibulum vel cursus neque, sed viverra magna. Praesent vel velit nec velit rhoncus varius eu in nunc. Suspendisse convallis ante sit amet nulla hendrerit condimentum. Etiam placerat a turpis a dignissim. Praesent pretium dolor sit amet condimentum mattis. Quisque condimentum id neque dapibus hendrerit. Vivamus et metus nulla. Donec interdum velit in tellus gravida lobortis. Morbi lacinia venenatis elementum.<br></span><br>

    <span style="font-size: 0.8em; text-decoration: italic;">Got a suggest that we could add to our website? Or found any information that is incorrect? Please feel free to contact us at <a href="check.gmail.com">Check</a></span>
  </div>      <!--bg 1-->
  <footer>
    <div>
      <a href="validation/citation.pdf" target= "_blank">Citations</a>
      <br>Copyright &copy; owned by Student College
    </div>
  </footer>
  </body>
</html>