页面布局 HTML 4.0 Transitional” VS XHTML 1.0 Transitional 新的不一定就好用！
前言
最近新的 XHTML ，用了一段时间感决虽然是新标准、不过感觉除了标签等的写法更严格了，最显著的差别就是二者之间
页面布局也有恶性的差异，尤其是对 Table 对象的布局方面，firefox，IE 这里表现的是统一的。
也就是html 上面写
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
和
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
会在很多方面有明显的不同。
以下通过一个列子进行说明
这个列子，主要布局使用的Table 对象，因为这个样式的东西用Div 是无法实现的，因为我搞了一天、也没成功，不管在那种html标准下
Div 都无法满足要求，别的都好说，就是下图中[2]的部分不用 js 没法实现。
图一：设计要求100% 宽度页面，要求最小支持 1024 x 768 ，主要支持 1280x1024，其余需求见图上
上图可以看出需求,
这种布局我用Div 搞了好久，如果不用 js 只用css 好像是做不来的、因为div 的 高度没法设置为，类似 “剩余部分100%” 的这种、所以根本无法满足需求，如果那位高人可以实现可以告诉我，我万分感激。
还有网页中用了一处，真彩色透明Png 就是那个大楼，看大楼下边边缘部分
和背景是融合的gif是不能达到这个效果的，ie7 以前不直接支持，Firefox 出来那天就支持了，ms 不知什么原因，ie7 才支持，不知道ms搞什么，有那么难吗？
为什么这么用Png24，颜色鲜艳，效果好有半透明功能，不过就是需要有特殊的样式支持，ie5.5 以前就没法支持了。
而且省的用 Photoshop隔图了，而且隔图作固定布局的网页还可以，有些时候ps隔的图没法做100%布局，而且隔图的html太乱了，
忙活半天终于搞出来了哎，还是用回了 table
图二：1280X1024 分辨率下 firefox 测试成功，布局正常
图三：最终测试符合要求，打完收工
还是不甘心啊，听说 html,body { height:100%;} 可以让 XHTM 标准的网页高度等于 100% 好看看，改 xhtml标准加样式。
图四：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 时的效果
靠上中下，三格竟然，平均分配大小！ 哎，还是改回 HTML 4.0 标准吧，HTML 4.0 下如果一个Table 上中下三个单元隔，上下都指定了高度
中间那个自动就会变为剩余部分的100%高、难道这样是不对的吗？也不知道 XHTML 标准怎么搞的。
以下是 html 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
<!--
html,body {
height:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/ltbg02.jpg);
background-repeat: repeat-x;
}
#header{
height: 120px;
}
/*编辑区域，相对位置，要设置Z顺序,否则可以被“大楼覆盖”*/
#editBody
{
position: relative;
z-index:9;
}
#middleLeft
{
width: 365px;
}
/*草地背景*/
#footerBg
{
background-image: url(images/BlgDownBg.jpg);
background-repeat: repeat-x;
background-position: bottom;
height: 150px;
}
/*
草地背景，中第一个Div用，
设置为相对位置，它里面的绝对定位样式就是以它的0，0点开始的了
高度一定要给，要不在 FireFox 显示不正常
*/
#footer{
position: relative;
height: 149px;
}
/*大楼，样式*/
#lefImg
{
position: absolute;
left: -2px;
bottom: 30px;
}
/*小楼楼，样式*/
#rimg
{
position: absolute;
right: 20px;
bottom: 150px;
}
#copyright{
position: absolute;
right: 30px;
bottom: 50px;
color: #FFFFFF;
}
.Test0 {
border: 1px solid #FFFF00;
}
-->
</style>
<!-- 如果小于等于ie6 -->
<!--[if lte IE 6]>
<style type="text/css">
.pngAlpha {
height: 1px;
width: 1px;
filter:expression(
this.style.filter = this.style.filter.indexOf("AlphaImageLoader")== -1 ? this.style.filter + "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingmethod=image )" : this.style.filter
);
}
</style>
<![endif]-->
</head>
<body >
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="middle" id="header" class="Test0" > </td>
</tr>
<tr>
<td id="middleLeft" class="Test0" > </td>
<td valign="top" id="middleRight" >
<div id="editBody" >
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p><a href="#">测试</a></p>
</div>
</td>
</tr>
<tr >
<td id="footerBg" colspan="2" valign="bottom" class="Test0" >
<!--注意，footer 样式应用在 td 是有问题的，当中间的文字多的时候，图片不会跟着走-->
<div id="footer" >
<img id="lefImg" src="data:images/home_t_01.png" class="pngAlpha Test0">
<img id="rimg" src="data:images/home_t_02.gif" class="Test0">
<div id="copyright" class="Test0" >版权：曲滨 2006 ，Emai:XXXXXX</div>
</div>
</td>
</tr>
</table>
</body>
</html>
说明一下，上面那个是专门给 ie6，ie5.5 准备的显示24色透明png 的样式脚本，我以前写的用了2年了。用了ie 的预编译，其他浏览器
自然就忽略了。
<!--[if lte IE 6]>
<style type="text/css">
.pngAlpha {
height: 1px;
width: 1px;
filter:expression(
this.style.filter = this.style.filter.indexOf("AlphaImageLoader")== -1 ? this.style.filter + "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingmethod=image )" : this.style.filter
);
}
</style>
<![endif]-->
如果那位园友，作类似的布局的话能少浪费点时间
还有谁可以在不用脚本的情况下，满足需求做出 div 布局的本类网页，请通知我，我的邮件在我blog 的头图上
这里下一个战书，给那些说 div 如何如何 nb 的园友，不是挑衅啊事先声明,子是争论一下技术而已 ^_^。
网页及图片下载
图片被处理了因为不都是我一个人设计的，我没权利放在包里抱歉。
页面布局 HTML 4.0 Transitional” VS XHTML 1.0 Transitional 新的不一定就好用！相关推荐
- Web前端布局实战：三国杀页面布局（上）
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
- DotNetTextBox V2.0 Web Control(ASP.NET2.0 增强型TextBox控件,完全支持AJAX.NET)
[控件界面] [控件介绍] 名称:DotNetTextBox V2.0 Web Control 免费无限制版 类型:ASP.NET2.0 增强型TextBox控件 作者: 小宝.NET2.0 主页:h ...
- Ext2.0教程一：Ext介绍以及 ext页面布局
学习ext有一段时间了,也开发了几个项目,抽点时间做个总结,刚好公司让我做个Ext培训,于是随便写个Ext教程. Ext介绍 Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用, ...
- 关于 XHTML 1.0 Transitional//EN 下的Relative问题
最近发现使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration) 的框架组件,能够帮助网站开发人员较 ...
- 利用div的定位制作复杂的页面布局
既然是复杂的布局自然用到较多的div以及并列与嵌套.这就要我们在为它们命名的时候遵从一定的规定,以便于可读性. 下面先来看一张布局图: 这是三九健康网一个频道的页面,原本是很长的页面,但为了说明问题, ...
- ExtJs懒人笔记(2) ExtJs页面布局
ExtJs学习目录 懒人笔记(1) ExtJs初探 ExtJs懒人笔记(2) ExtJs页面布局 ExtJs懒人笔记(3) 动态Grid的实现 页面布局,对于做Web开发者来说是一定不会陌生的,而这些 ...
- 使用母版页实现页面布局
使用母版页实现页面布局 asp.net mvc beta 2008-12-12 08:46 阅读4 评论0 字号: 大 大 中 中 小 小 (原创:灰灰虫的家http://hi. ...
- div手绘页面布局(上下左右中)
1.空白页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
最新文章
- 吴恩达老师深度学习视频课笔记：单隐含层神经网络公式推导及C++实现(二分类)
- 阿里全球数学竞赛第二届
- 实例详解 DB2 排序监控和调优
- 安卓 onTouch OnTouchEvent onChick 顺序
- java线索二叉树的实现_JAVA递归实现线索化二叉树
- python第五章上机实践报告_第五章实践报告 - osc_kk5bjg1i的个人空间 - OSCHINA - 中文开源技术交流社区...
- 大数据教程（2.2）：Linux系统安装JDK1.7
- qt串口通信_Qt编写气体安全管理系统29-跨平台
- c#写图像tif gdal_C#使用GDAL将tif图像转换为jpg、bmp、png和gif格式的图像
- java源程序文件的扩展名_使用Java语言编写的源程序保存时的文件扩展名是什么...
- 启动报错:读取 jar时出错； error in opening zip file
- 前端的图片优化的6种方案
- 通过Pyecharts绘制可视化地球竟 然如此简单
- nowcoder：[编程题] 头条校招（贪心）
- 大学生开学需要准备哪些数码产品、五款大学生必买的电子产品
- 关于Cause: java.sql.SQLException: The server time zone value 的解决办法
- 功率变送器让造纸磨浆机控制系统的可靠又安全
- 软件/APP/产品投放渠道分类大全
- 事件驱动模型与IO多路复用
- 【鸽子木·每日一题】蛇形矩阵（3月23日）