table 和 div 简单布局
table 简单布局
<!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>table布局</title>
</head> <body marginheight="0px" marginwidth="0px">
<table width="100%" height="965" style="background-color: #003">
<tr>
<td colspan="3" width="100%" height="320" style="background-color: #C6C">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:#303">这是左半部</td>
<td width="70%" height="80%" style="background-color: #CC3" >这是右半部</td>
<tr>
<td width="100%" height="10%" style="background-color: #600" >这是下部</td>
</tr> </table> </body>
</html>
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>idv布局</title> <style type="text/css">
body{ margin:0px;}
div#center{
width:100%;
height:950px;
background-color: #666;
}
div#heading{
width:100%;
height: 10%;
background-color:#096
}
div#menuw{
width:30%;
height:80%;
background-color:#993;
float:left;
}
div#lift{ width:70%;
height:80%;
background-color:#FC0
float:left;
}
div#floor{ width:100%;
height:10%;
background-color: #39F;
clear: both;}
</style>
</head>
<body>
<div id="center">
<div id="heading">头部</div>
<div id="menuw">左半部分</div>
<div id="lift">右半部分</div>
<div id="floor">底部</div>
</body>
</html>
对比：个人觉得table简单好理解，就像垒砖一块挨一块，踏实。 而div更具特色，就像泼墨，随便勾画几笔便是巨作。
简单 说table 和 div 各有各的好处。
table 和 div 简单布局的更多相关文章
- 浅谈table和DIV网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...
- js动态生成按钮，页面用DIV简单布局2
对前边不完善的修改 <!DOCTYPE html><html><head><title>test.html</title> <meta ...
- js动态生成按钮，页面用DIV简单布局
今天朋友让我忙帮给写个页面,由于时间紧破,所以没有完善,暂时先贴出来,以后有时间了在做修改 <!DOCTYPE html><html><head><title ...
- div简单布局理解
以下是div的理解
- 每天点滴的进行，css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
随机推荐
- (C#)Windows Shell 外壳编程系列5 - 获取图标
(本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令 有 ...
- 快速沃尔什变换（FWT）学习笔记
概述 FWT的大体思路就是把要求的 C(x)=A(x)×B(x) 即 \( c[i]=\sum\limits_{j?k=i} (a[j]*b[k]) \) 变换成这样的:\( c^{'}[i]=a^ ...
- BZOJ2565：最长双回文串
浅谈\(Manacher\):https://www.cnblogs.com/AKMer/p/10431603.html 题目传送门:https://www.lydsy.com/JudgeOnline ...
- GPIO编程2：使用GPIO监听中断完整程序
一个完整的使用GPIO捕捉中断的程序: #include<stdlib.h> #include<stdio.h> #include<string.h> #inclu ...
- 【转】 Pro Android学习笔记（七八）：服务（3）：远程服务：AIDL文件
目录(?)[-] 在AIDL中定义服务接口 根据AIDL文件自动生成接口代码 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.n ...
- 查看osdmap命令
标签(空格分隔): ceph,ceph运维,osdmap 方法一: 最直接,简单的命令: [root@node3 ~]# ceph osd tree ID CLASS WEIGHT TYPE NAME ...
- 基于OpenCV的火焰检测（二）——RGB颜色判据
上文跟大家分享了在做火焰检测中常用到的图像预处理方法,从这一篇博文开始,我将向大家介绍如何一步一步地检测出火焰区域.火焰提取要用 到很多判据,今天我要向大家介绍的是最简单的但是很有效的判据--RGB判 ...
- iOS开发之---KVC全解
————————————————————————————————————————————————————————————— 一 KVC的基本概念 KVC是Key Value Coding的缩写,意思是 ...
- distinct可以用in代替(小技巧)
distinct可以用in代替,in的好处是直接能获取所有数据,而distunct只能获取distinct的字段,不过效率肯定高一些.
- Solaris11.1网络配置(Fixed Network)
Solaris11的网络配置与Solaris10有很大不同,Solaris11通过network configuration profiles(NCP)来管理网络配置. Solaris11网络配置分为 ...