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="#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整体布局分析的更多相关文章
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- HTML CSS + DIV实现整体布局 part2
9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图: 从上往下看,层次关系如下: 第1层:盒子的边框(border), 第2层:元素的内容(content).内边 ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- JFS 文件系统概述及布局分析
JFS 文件系统概述及布局分析 日志文件系统如何缩短系统重启时间 如果发生系统崩溃,JFS 提供了快速文件系统重启.通过使用数据库日志技术,JFS 能在几秒或几分钟之内把文件系统恢复到一致状态,而非日 ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
随机推荐
- mybatis 学习笔记(4) —— 批量新增数据
1.业务是从前台传入List<T> ,在controller层接受参数,并进行批量新增操作. 2.需要处理的细节 a) mybatis可以支持批量新增,注意数据表需要将主键设置成自增列. ...
- Echop后台分页实现原理详解
ecshop后台开发,工作中分页中遇到的问题 1.通过筛选条件筛选出数据后,点击下一页返回没有筛选(所有数据)的第二页数据 效果 结果 点击分页后效果 问题:ecshop分页利用ajax实现,在点击下 ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- python对比两个文件问题
写一个比较两个文本文件的程序. 如果不同, 给出第一个不同处的行号和 列号. 比较的时候可以使用zip()函数 a=open('test.txt','r') b=open('test2.txt','r ...
- JQuery整体大纲
今天公司放假,闲的无聊,就总结了一套JQuery的笔记,我感觉更像是大纲,在这里跟大家分享一下,这是我的成果: 这个就是我的劳动成果了,说实话真是不容易,为了做这个东西,翻阅了很多以前做过的笔记,发现 ...
- Hibernate的批量处理
Hibernate完全以面向对象的方式操作数据库,当程序员以面向对象的方式操作持久化对象时,将自动转换为对数据的操作.例如我们Session的delete()方法,来删除持久化对象,Hibernate ...
- Ant快速入门(一)-----Ant介绍
Ant是一种基于Java的生成工具.从作用上来看,它类似于C编程(UNIX平台上使用比较多)的Make工具,C/C++项目经常使用Make工具来管理整个项目的编译,生成 Make使用Shell命令来定 ...
- Remember the Word
uvalive3942:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...
- 主流屏幕对比：IPS/LTPS/CGS/IGZO/AMOLED
IPS.LTPS.CGS.IGZO.AMOLED都是什么屏幕又有什么区别?目前的手机屏幕技术实在太多,本文旨在介绍各种面板以及屏幕技术,便于大家更好地进行区分. 近年来手机屏幕技术层出不穷,早在几年前 ...
- WM_CLOSE、WM_DESTROY、WM_QUIT的区别（询问，销毁窗口，退出进程，都不是一回事）
1.发送消息SendMessage.PostMessage PostMessage将消息放入消息队列后马上返回,而SendMessage直到窗口过程处理完消息后才返回 2.三个消息的区别 WM_CLO ...