首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

一个很简单却很奇怪的div+css有关问题

2012-02-06 
一个很简单却很奇怪的div+css问题页面1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN http:

一个很简单却很奇怪的div+css问题


页面1

<!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=gb2312 "   />
<title> 无标题文档 </title>
<link   href= "css.css "   rel= "stylesheet "   type= "text/css "   />
</head>

<body>
<div   id= "container "> <!--页面层容器-->
   <div   id= "Header "> <!--页面头部-->   页面头部 </div>
   <div   id= "PageBody "> <!--页面主体-->
     <div   id= "Sidebar "> <!--侧边栏--> 这是左侧     </div>
     <div   id= "MainBody "> <!--主体内容--> 这是右边主体内容   </div>
   </div>
   <div   id= "Footer "> <!--页面底部--> 页面底部   </div>
</div>
</body>
</html>

页面2

<!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=gb2312 "   />
<title> 无标题文档 </title>
<link   href= "css.css "   rel= "stylesheet "   type= "text/css "   />
</head>

<body>
<div   id= "container ">
<div   id= "Header ">
这是头文件 </div>
<div   id= "PageBody ">
<div   id= "Sidebar "> </div>
<div   id= "MainBody "> </div>
</div>
<div   id= "Footer "> </div>
</div>
</body>
</html>

css.css

/*   CSS   Document   */

/*基本信息*/
body   {font:12px   Tahoma;margin:0px   auto;text-align:center;background:#FFF;}

/*页面层容器*/
#container   {width:800px;   margin:0px   auto;}

/*页面头部*/
#Header   {width:800px;height:100px;background:#FFCC99;}

/*页面主体*/
#PageBody   {width:800px;height:400px;background:#CCFF00}
/*主体左侧*/
#Sidebar   {float:left;   width:200px;   height:400px;   background-color:#996633;   }
/*主体右侧*/
#MainBody{float:left;   width:600px;   height:400px;   background-color:#CC6600;}
/*页面底部*/
#Footer   {width:800px;margin:0   auto;height:50px;background:#00FFFF}


问题是:页面一和顶部怎么都有10px的距离   页面二却能紧挨顶部。

[解决办法]
页面1有中文空格,去掉即可
<body>
<div id= "container "> <!--页面层容器-->
<div id= "Header "> <!--页面头部-->   页面头部 </div>
<div id= "PageBody "> <!--页面主体-->
     <div id= "Sidebar "> <!--侧边栏--> 这是左侧     </div>
     <div id= "MainBody "> <!--主体内容--> 这是右边主体内容   </div>
   </div>
   <div id= "Footer "> <!--页面底部--> 页面底部   </div>


</div>
</body>
</html>

热点排行