标签：
<!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>无标题文档</title> <style type="text/css"> span{display:block; width:100px; height:70px; background-color:#F00; text-align:center; vertical-align:middle; padding-top:30px; margin-left:auto; margin-right:auto; } </style> </head> <body bgcolor="#CCCCCC"> <div id="main" style=" margin-top:auto; margin-left:auto; margin-right:auto; width:800px; height:800px; background-color:white;" > <div style="width:100%; height:200px;; background-color:#BEDCD9 ; float:none;"> <div id="title" style="background-color:#F63; text-align:center; font-size:24px; height:120px;">标题区 <a name="top"></a> </div> <div id="nav" style="background-color:#FF6; height:80px;">导航</div> </div> <div style="width:20%; height:100%; background-color:#D0C8AC; float:left " > 导航栏 </div> <div style="width:100%;height:100%; background-color: #FFC">正文栏而在大多数情况下，我们还会为头部加上标题区与导航区。理论上也是嵌上去的，如代码： 程序代码 <div id="header"> <div id="title">标题区</div> <div id="nav">导航</div> </div> 但要注意的是：虽然是可以嵌套上去的，也可以多级嵌套，但这样势必会占用浏览器较多的资源来解析这种布局，有些时候还会出现解析错误。从实用性上来说，XHTML为我们提供了多种标签，如 h1,strong,span,p,ul,li,img,div,body……，它们每一个标签都有各自实用的元素，在合适的地方使用合乎元素意义的标签是很有必要的。这样不仅增加了可读性与可伸缩性，而且也符合"物有所值"的原则——div主要用于大块布局的调整。因此上面的代码可以改良为： 程序代码 <div id="header"> <h1>标题区</h1> <ul>导航</ul> </div> <div id="center"> <div id="left"></div> <div id="right"></div> </div> <div id="footer">底部</div> </div> <a href="#top">向上</a> <div id="foot" style="width:100%; height:100px; background-color:black; color:white; text-align:center; vertical-align:middle ;" > <span > 版权信息 </span></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/guxiaosao/p/4177888.html
