body标签也CSS优化

时间:2009-06-24 14:19:13 ｜来源:ACCP教程网｜作者:冰川｜点击:次

今天给大家讲解一下body标签的用法，有人问为什么body也要修饰外表么，这里详细介绍一下它的用意。

先上图，看图1大家发现导航栏目和上面有空格。

图片1

大家想是不是我代码写错了，给层加多了margin属性，给层加了top距离。告诉大家我没有加，放上代码

<!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>ACCP教程网导航</title> <style> .topMenu{width:100%; height:32px; background-image:url(http://www.accptech.com/templets/accptechimg/topdh.jpg); margin-bottom:5px;color:#FFF; line-height:25px;margin:0px; padding:0px;font-size:12px;} .topMenu span{float:left; padding-left:30px; padding-right:8px;} .topMenu ul{margin:0px; padding:0px;} .topMenu ul li{float:left; width:70px;list-style-type:none;} .topMenu a{color:#FFF} .topMenu a:hover{color: #F30;} a{text-decoration:none; color:#369} a:hover {color: #F30;} </style> </head> <body> <div class="topMenu"><span style="float:right"><ul> <li><a href="#" _fcksavedurl="#" onClick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.accptech.com/');>设为首页</a></li> <li><a href="#" _fcksavedurl="#" onClick="window.external.addFavorite('http://www.accptech.com/','ACCP教程网')">加入收藏</a></li> <li><a href="http://www.accptech.com/ask/" _fcksavedurl="http://www.accptech.com/ask/" target="_blank">在线问答</a></li> <li><a href="http://www.accptech.com//special/" _fcksavedurl="http://www.accptech.com//special/" target="_blank">专题栏目</a></li> <li><a href="http://www.accptech.com/member/" _fcksavedurl="http://www.accptech.com/member/" target="_blank">会员中心</a></li> </ul></span> <span>镜像站点：</span> <ul><li><a href="http://www.accptech.com/" _fcksavedurl="http://www.accptech.com/" target="_blank">网站主页</a></li><li><a href="http://bbs.accptech.com/" _fcksavedurl="http://bbs.accptech.com/" target="_blank">网站论坛</a></li> </ul> </div> </body> </html>
//ACCP教程网提示您：您可以先修改部分代码再运行

看完之后大家就觉得很奇怪是吧，为什么会有多了一个间隔呢？这是因为body标签在没有修饰的情况下会有一个margin属性的默认值top，所以我们要给他修饰，用CSS属性设为了margin :0 ，就可以解决这个问题了。如图2效果

图片2

发现没有，body高没有了。放上运行代码看一看。

<!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>ACCP教程网导航</title> <style> body{ margin:0px; padding:0px;} .topMenu{width:100%; height:32px; background-image:url(http://www.accptech.com/templets/accptechimg/topdh.jpg); margin-bottom:5px;color:#FFF; line-height:25px;margin:0px; padding:0px;font-size:12px;} .topMenu span{float:left; padding-left:30px; padding-right:8px;} .topMenu ul{margin:0px; padding:0px;} .topMenu ul li{float:left; width:70px;list-style-type:none;} .topMenu a{color:#FFF} .topMenu a:hover{color: #F30;} a{text-decoration:none; color:#369} a:hover {color: #F30;} </style> </head> <body> <div class="topMenu"><span style="float:right"><ul> <li><a href="#" _fcksavedurl="#" onClick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.accptech.com/');>设为首页</a></li> <li><a href="#" _fcksavedurl="#" onClick="window.external.addFavorite('http://www.accptech.com/','ACCP教程网')">加入收藏</a></li> <li><a href="http://www.accptech.com/ask/" _fcksavedurl="http://www.accptech.com/ask/" target="_blank">在线问答</a></li> <li><a href="http://www.accptech.com//special/" _fcksavedurl="http://www.accptech.com//special/" target="_blank">专题栏目</a></li> <li><a href="http://www.accptech.com/member/" _fcksavedurl="http://www.accptech.com/member/" target="_blank">会员中心</a></li> </ul></span> <span>镜像站点：</span> <ul><li><a href="http://www.accptech.com/" _fcksavedurl="http://www.accptech.com/" target="_blank">网站主页</a></li><li><a href="http://bbs.accptech.com/" _fcksavedurl="http://bbs.accptech.com/" target="_blank">网站论坛</a></li> </ul> </div> </body> </html>
//ACCP教程网提示您：您可以先修改部分代码再运行

顶一下

(0)

踩一下

(3)

100%

上一篇：html的主体标签body 下一篇：HTML5怎么就成了RIA“杀手”？

文章收藏 | 文章挑错 | 文章推荐 | 标签： CSS body

评论加载中....

body标签也CSS优化

相关内容

热门内容