div整体布局分析

最新推荐文章于 2024-04-30 22:06:17 发布

weixin_30265103

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量81

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/guxiaosao/p/4177888.html

版权

<!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>

转载于:https://www.cnblogs.com/guxiaosao/p/4177888.html

weixin_30265103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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><...
复制链接

扫一扫