首页 > 代码库 > div整体布局分析
div整体布局分析
<!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=http://www.mamicode.com/"#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>
div整体布局分析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。