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

div整体布局分析的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. HTML CSS + DIV实现整体布局 part2

    9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:     从上往下看,层次关系如下: 第1层:盒子的边框(border),     第2层:元素的内容(content).内边 ...

  3. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  4. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  5. JFS 文件系统概述及布局分析

    JFS 文件系统概述及布局分析 日志文件系统如何缩短系统重启时间 如果发生系统崩溃,JFS 提供了快速文件系统重启.通过使用数据库日志技术,JFS 能在几秒或几分钟之内把文件系统恢复到一致状态,而非日 ...

  6. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  7. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

随机推荐

  1. JQuery语法总结和注意事项

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  2. windows计划任务执行SQLserver脚本

    2016年3月1号,北京出差,documentbrowser系统改善上线. 其中有一个数据库表需要每天进行同步,原计划使用SQLServer的作业来执行又方便又快捷,但是客户的数据库是05的expre ...

  3. angularJS中如何写控制器

    angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...

  4. JQUERY1.9学习笔记 之基本过滤器(八) 最后元素选择器

    最后元素选择器 jQuery( ":last" ) 描述:选择与之匹配的最后元素. 例:选择表格的最后一行. <!DOCTYPE html><html lang= ...

  5. Python新手学习基础之数据结构-序列2

    长度.最大值和最小值 序列类型的数据结构,常常会用到长度检查.最大最小值检查的函数. 他们的作用: len(序列):返回列表的长度(元素个数): max(序列) :返回列表中元素最大值: min(序列 ...

  6. JLRoutes--处理复杂的URL schemes-备

    关键字:URL,URL schemes,Parse  代码类库:网络(Networking) GitHub链接:https://github.com/joeldev/JLRoutes   JLRout ...

  7. 7月12日至芯FPGA就业班招生

    至芯科技FPGA就业培训班将于2014年7月12日正式开班,届时至芯科技将秉承着一贯的教学传统,为广大师生打造一个专业的技术平台和轻松的学习环境. 在夏宇闻教授的带领下,至芯科技汇聚了一批来自国内外大 ...

  8. Regularized Linear Regression with scikit-learn

    Regularized Linear Regression with scikit-learn Earlier we covered Ordinary Least Squares regression ...

  9. OSPF+LVS ,qugga,vconfig,...感觉这些很有想法啊

    将以前铁板一块的硬件拿来无限细分,路由器,交换机可灵活实现,SDN,NVF.硬盘可以分区,分区可以分布式块存储,操作系统可虚拟化,KVM OR LXC,网络可自由随时按需求定制更改配置. 操作系统支持 ...

  10. Linux下的库操作工具-nm、ar、ldd、ldconfig和ld.so

    Linux下的库操作工具-nm.ar.ldd.ldconfig和ld.so .nm [options] file 列出file中的所有符号 [option] -c 将符号转化为用户级的名字 -s 当用 ...