最近在做邮箱页面（也不知道是不是这样称呼，反正就是做好的页面发送到邮箱的），总结了些心得，在这里贴出来和大家讨论讨论：
我是采用table+css布局的，听说是table+css比div+cs的要好，至于这个你信不信，我管不着，因为我没去查证过。
因为邮箱页面是在腾讯邮箱原有样式的基础上来继续做的，所以有些样式会影响到整体的，样式采用内联式（外联和嵌入式是插不进的）。
表格布局，我们就会很自然而然的少用到浮动，能不用的尽量就不要用到这位“大神仙”了，它太难请了，用的比补回去的还要多，不划算。我们一些做好的在任何主浏览器里面测试都ok的页面发送到邮箱，会让你出乎意料，它不一定全部兼容，或许还可能很糟糕，这里不重点讲了。我们接下来说说“定位”。我试过绝对定位，在页面里面，采用表格布局，相对参照物的绝对定位物体的父集，不是body，页面浏览的时候，火狐是不认识的，他还是会按照body来，除非你在父集里面固定样式的宽和高，还有最最重要的display：block这句，这样写火狐就没问题了，但这仅仅只是在普通的页面浏览上，一发送到邮箱，不止火狐，包括其他，如ie678,360，谷歌，歌剧，苹果等浏览器都乱套了，（当然，绝对定位还有个坏处，就是不安全，你绝对定位了，人家又看不到，如果在发送的时候放个危险木马病毒啥的进去，我们邮箱接收了就惨了）比如：
html:(部分)
<TR>
<TD style="MARGIN-TOP: 8px; DISPLAY: block; BACKGROUND: url(IMG/model2.jpg) no-repeat; HEIGHT: 292px; COLOR: #000; CLEAR: both">
<P style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; MARGIN-TOP: 53px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; HEIGHT: 58px; MARGIN-LEFT: 153px; PADDING-TOP: 0px"><STRONG style="DISPLAY: block">学习方案<SPAN style="FONT-SIZE: 16px">唯一</SPAN></STRONG> 考后出现的学习状况，根据每个学生的学习制定1对1高分方案，从充沛的师资队伍中为您挑选最适合的老师。</P>
<P style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; MARGIN-TOP: 40px; PADDING-LEFT: 0px; WIDTH: 150px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 140px; PADDING-TOP: 0px"><STRONG style="DISPLAY: block">心理疏导<SPAN style="FONT-SIZE: 16px">专业</SPAN></STRONG>心理专家针对期中考后学生 会出现的心理问题进行免费 诊断，从心理、家庭、健康 全方位优化其学习方法，激 发斗志，调整心态。 </P>
<P style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 20px; MARGIN-TOP: 4px; PADDING-LEFT: 0px; WIDTH: 250px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 27px; PADDING-TOP: 0px"><STRONG style="DISPLAY: block">自习<SPAN style="FONT-SIZE: 16px">事半功倍</SPAN></STRONG>我们的自习教室配有专职的班主任。班主任全 程跟踪每位学生的学习过程，交流学生情况， 营造学习氛围，实时监督保证学生的学习效果， 帮助学生养成自习的好习惯。</P>
</TD>
</TR>
效果：
大家都看到效果图了，这就是我用了绝对定位后的两种反差，好了，就这么多。
end
注：有深度研究过这类的你们可以留言告诉我一些你们碰到的趣事或者经验谈，随时欢迎来交流 :)
posted on
