CSS HTML-文本不会覆盖到页脚背景色

Stoney Gilber 发表于 Dev

斯托尼·吉尔伯

这是我的大问题，我非常强调，链接文本不会覆盖到页脚的背景色，请帮助我：[]使用HTML和CSS的新手。并请更正所有代码，如果可能的话，您会看到错误的代码，因为我只是从头开始。谢谢

* {
	background-color: #CEF6CE;
	font-family: calibri;
	margin: 0px;
}
.wrapper {
	background-color: white;
	height: 635px;
	width: 900px;
    margin: 0 auto;
}
.login {
	background-color: red;
	width: 300px;
	height: 350px;
	margin-top: 150px;
	margin-left: 450px;
	margin-right: 200px;
	text-align: center;
	position: absolute;
	font-size: 20px;
}
.footer {
	background-color: #4A4A4A;
	width: 5000px;
	height: 5000px;
	margin: 0 auto;
	position: fixed;
	font-size: 13px;
}
a:link {
	background-color: transparent;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

<!doctype html>
<html>

<head>
<title>Insight - Community Portal</title>
<link rel="stylesheet" type="text/css" href="css\homepage_design.css">
</head>

<body>

<div id = "main">
	
	<div class = "wrapper">
	
	<div class = "login">
	School <br> Community Portal
	</div>
	
	</div>

	<div class = "footer">
	 <table border="0" cellpadding="5">
	<tr>
		<td><a href=" " style="color: #E0E0E0">About</a>&nbsp;&nbsp;&bull;</td>
		<td><a href=" " style="color: #E0E0E0">Help</a>&nbsp;&nbsp;&bull;</td>
	</tr>
	</table> 
	</div>
	
	
</div>

</body>

</html>

维加德·豪格斯特维特（Vegard Haugstvedt）

问题是这部分：

* {
  background-color: #CEF6CE;
  ...
}

*选择器使此样式适用于所有标签。对于页脚，可以使用以下样式覆盖它：

.footer {
  background-color: #4A4A4A;
  ...
}

我从“ *”样式中删除了背景颜色，而是将其分配给了body-tag：

body {
  background-color: background-color: #CEF6CE;
}

完成的代码：

body {
  background-color: #CEF6CE;
}
* {
  font-family: calibri;
  margin: 0px;
}
.wrapper {
  background-color: white;
  height: 635px;
  width: 900px;
  margin: 0 auto;
}
.login {
  background-color: red;
  width: 300px;
  height: 350px;
  margin-top: 150px;
  margin-left: 450px;
  margin-right: 200px;
  text-align: center;
  position: absolute;
  font-size: 20px;
}
.footer {
  background-color: #4A4A4A;
  width: 5000px;
  height: 5000px;
  margin: 0 auto;
  position: fixed;
  font-size: 13px;
}
a:link {
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

<div id="main">

    <div class="wrapper">

      <div class="login">
        School
        <br>Community Portal
      </div>

    </div>

    <div class="footer">
      <table border="0" cellpadding="5">
        <tr>
          <td><a href=" " style="color: #E0E0E0">About</a>&nbsp;&nbsp;&bull;</td>
          <td><a href=" " style="color: #E0E0E0">Help</a>&nbsp;&nbsp;&bull;</td>
        </tr>
      </table>
    </div>


  </div>