Question

我真的不知道我在做什么，但是我使用Dreamweaver C6，div和css为新的页面布局创建了以下代码。它似乎工作，但我很好奇为什么在设计模式中我的内容区域不显示白色背景，但在实时模式或在浏览器中测试它确实显示内容背景颜色。

我只是想了解发生了什么。请随时就如何撰写本文提供任何建议。请记住，我真的不知道我在做什么。我整个星期只是为了到达我所在的地方。我真的很难让头部导航器对齐，并且菜单栏导航器居中。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



<style>

*{
padding: 0px;
margin: 0px;
}   

html { 
min-height: 100%; 
margin-bottom: 1px; 
}


#container{
width: 800px;
height: auto;
margin: 0px auto;
border-right: 1px solid black;  
border-left: 1px solid black;
}

body{
background: #a6b17a;    
margin: 0px auto;
}



#header{
width: 800px;
height: 123px;
background-color: #c2c08d; 
margin: 0px auto;
}

#hnav{
width: 425px;
height: 15px;
background-color: ; 
margin-left: 375px;
font-size: 12px;
color: #fff;
text-align: right;  
}

#hnavbar ul { 
margin: 0; 
padding: 0px; 
list-style-type: none; 
text-align: right; 
background-color: #000; 
height: 15px;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
float: right;

}
#hnavbar ul li {  
display: inline; 

} 

#hnavbar ul li a { 
text-decoration: none; 
padding: .2em .3em; 
color: #fff; 
background-color: ; 
text-align: right;

} 

#hnavbar ul li a:hover { 
color: #000; 
background-color: #CC3; 
} 


#hgraphic{
width: 425px;
height: 105px;
background-image: ;     
margin-left: 375px;
}



#menubar{
width: 800px;
height: 35px;
background-color: #000;
margin: 0px auto;
font-size: 12px;
color: #fff;    
text-align: center;

}

#navbar ul { 
margin-top: 10px;
padding: 0px; 
list-style-type: none; 
text-align: center; 
background-color: ; 
height: 35px;
width: 800px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float: left;

}
#navbar ul li {  
display: inline; 

} 

#navbar ul li a { 
text-decoration: none; 
padding: 10px 8px; 
color: #fff; 
background-color: ; 
text-align: left;

} 

#navbar ul li a:hover { 
color: #000; 
background-color: #CC3;  
} 



#content{
width: 800px;
height: 500px;
background: #fff;
margin: 0px auto;
}



#footer{
width: 800px;
height: 75px;
background: #000;
margin: 0px auto;
}

</style>



</head>

<body>

<div id="container">

<div id="header">

<div id="hnav">

<div id="hnavbar"> 
  <ul> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Contact Us</a></li> 
<li><a href="#">Locations</a></li> 
<li><a href="navtest1.html">Home</a></li> 
 </ul>
</div> 


<div id="hgraphic"></div>

</div></div>

<div id="menubar">
<div id="navbar"> 
  <ul> 
<li><a href="#">Online Banking</a></li> 
<li><a href="#">Onine Services</a></li> 
<li><a href="#">Loans</a></li> 
<li><a href="#">Deposits</a></li> 
    <li><a href="#">Trusts Invenstments</a></li> 
    <li><a href="#">Community News</a></li> 
    <li><a href="#">Community Club</a></li> 
    <li><a href="#">Identity Theft</a></li> 
    </ul>
</div>
</div>




<div id="content"></div>

<div id="footer"></div>


</div>


</body>
</html>

CSS代码不显示内容

0 个答案: