div+css重构

一直以来都是使用table来建立网站，繁重的工作，臃肿的代码，每次想修改的时候，要重头在photoshop切图，再重新编辑，实在是累人，而且到最后在浏览器测试的时候，发现错误，又要重新修改。而且还要考虑到兼容firefox浏览器的问题。
这两天买了金峰老师编写的《变幻之美：DIV+CSS网页布局揭秘》，如获至宝。虽然以前对DIV+CSS有基础的学习，但是对PSD图片切图到对HTML的编写过程不多。看了30页后，我就决定对淘宝的旺铺进行修改，从而解决在firefox中的table变性的问题。
按照思路，我先把结构重构代码是

把广告为左中右三个结构。然后继续晚上结构。

把右侧的上下架构定义出来。然后的工作就是做CSS的排版定位工作了。
CSS代码也是慢慢的完善，这里我学习了金峰老师的良好习惯，把每个部位都定义背景色，这样就可以在排版错误后，看清楚错误在什么地方，修改就很方便了。使用Dreamweaver的CSS代码编写工具，可视化编辑，非常方便，不需要记住繁琐的CSS代码。最后代码如下：

搞定后，想去淘宝直接使用发现一个难题，原来淘宝对CSS文件，是要过滤屏蔽的。而且也不能直接在网页定义

这个非常不爽。借鉴了一些装修店铺的方法，得到了解决之道。我把每个div层，都定义

这样就不需要引用外部的CSS文件了。最终代码如下：

这里纯粹记录我的学习过程，希望大家一起探讨CSS的乐趣。