我有这个页面的问题。标题后面的区域(它说 Hello!)应该是 #33333(灰色)而不是绿色。我知道这将是一件非常简单的事情。有什么帮助吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon">
<LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unavit</title>
<style type="text/css"></style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/css.css" type="text/css">
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/early_ie.css" /><![endif]-->
<style type="text/css">
</style>
</head>
<body>
<div id="mapsHeader">
<div id="mapsBanner"></div>
</div>
<div id="mapsContent">
<div id="mapsBodyArea">
Hello!
</div>
</div>
<div id="footer">
<div id="container">
<div id="bottomNav">
<table width="1029">
<tr>
<td align ="center" width="87"><font color = "#333"><a href="index.html">HOME</a></font></td>
<td>|</td>
<td align ="center" width="121"><font color = "#333"><a href="aboutus.html">ABOUT US</a></font></td>
<td>|</td>
<td align ="center" width="99"><font color = "#333"><a href="joinus.html">JOIN US</a></font></td>
<td>|</td>
<td align ="center" width="134"><font color = "#333"><a href="contact.html">CONTACT US</a></font></td>
<td>|</td>
<td align ="center" width="61"><font color = "#333"><a href="faq.html">FAQ</a></font></td>
<td>|</td>
<td align ="center" width="213"><font color = "#333"><a href="terms.html">PRIVACY & TERMS</a></font></td>
<td align ="center" width="175"><font color = "#333">©Unavit 2012</font></td>
<td align ="center" width="48" height="50"><a href="http://twitter.com" target="_blank"><img src="images/tweet.png" width="50" height="50"/></a></td>
<td align ="center" width="51" height ="50"><a href="http://facebook.com" target="_blank"><img src="images/face.png" width="50" height="50"/></a></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
这是CSS:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #33333;
}
ol {
margin:1em 0 1em 3em;
}
ul {
list-style:disc;
margin:1em 0 1em 3em;
}
li {
margin:.3em 0
}
body {
background-color: #9FCC3A;
font-family: "Comic Sans MS", cursive;
}
a {
text-decoration: none;
color: #333;
}
a:link {
text-decoration:none;
color: #333;
}
a:hover{
text-decoration:none;
color: #333;
}
a:visited{
text-decoration:none;
color: #333;
}
a:active {
text-decoration: none;
color: #333;
}
#header {
background-color: #33C0C5;
height: 240px;
overflow: hidden;
width: 100%;
}
#mapsHeader {
height: 67px;
overflow: hidden;
width: 100%;
}
#header #banner {
width: 1028px;
left: auto;
right:auto;
margin-right: auto;
margin-left: auto;
}
#mapsHeader #mapsBanner {
width: 100%;
height: 67px;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;
background-image: url(../images/mapsBanner.png);
background-repeat: repeat-x;
}
#mapsContent {
width: 100%;
height: auto;
background-color: #33333;
overflow: hidden;
}
#mapsContent #mapsBodyArea{
width: 1028px;
margin-right: auto;
margin-left: auto;
}
#content {
width: 100%;
height: auto;
background-color: #FFFFFF;
overflow: hidden;
}
#content #bodyArea{
width: 1028px;
margin-right: auto;
margin-left: auto;
}
#content #bodyArea #mapsRight {
width: 773px;
float: right;
}
#content #bodyArea #mapsLeft {
width: 255px;
float: left;
}
#content #bodyArea #leftJoin{
width: 107px;
float: left;
}
#content #bodyArea #rightJoin{
width: 921px;
float: right;
}
#content #bodyArea #mapBoxSpacer {
height: 33px;
}
#content #bodyArea #mapBoxSpacer2 {
height: 50px;
}
#content #bodyArea #spacer{
height: 100px;
}
#content #bodyArea #smallSpacer {
height: 15px;
clear: both;
}
#content #bodyArea #spacer1{
height: 50px;
}
#content #bodyArea #left {
width: 586px;
float: left;
}
#content #bodyArea #aboutTitle {
width: 1028;
}
#content #bodyArea #leftAbout {
width: 450px;
float: left;
}
#content #bodyArea #rightAbout {
width: 574px;
float: left;
}
#content #bodyArea #left #nav {
position: relative;
}
#img2 {
position: absolute;
left: 21px;
top: 25px;
}
#img3 {
position: absolute;
left: 21px;
top: 75px;
}
#img4 {
position: absolute;
left: 21px;
top: 125px;
}
#img5 {
position: absolute;
left: 21px;
top: 175px;
}
#img6 {
position: absolute;
left: 21px;
top: 225px;
}
#navFont {
font-size: 15pt;
font-family: Arial, Helvetica, sans-serif;
}
#content #bodyArea #left #spacerLeft {
height:15px;
}
#content #bodyArea #right {
width: 442px;
float: right;
}
#content #bodyArea #right #spacerRight {
height: 10px;
}
#content #bodyArea #right #clear {
width: 590px;
clear: both;
}
#content #bodyArea #right #rightLeft {
width: 295px;
float: left;
}
#content #bodyArea #right #rightRight {
width: 290px;
float: right;
}
#content #bodyArea #right #rightRight #spacerRightRight {
height: 10px;
}
#footer {
background-color: #9FCC3A;
width: 100%;
overflow: hidden;
}
#footer #container {
clear: both;
width: 1028px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#footer #container #bottomNav {
width: 1028px;
float: right;
color: #333;
}
#footer #container #spacerFooter {
width: 191 px;
float: left;
}
#footer #container #clearFooter {
clear:both;
}