不管多么复杂的页面布局设计，总是以div为基础，通过几个div之间的组合与嵌套来实现。因此在思考较复杂的页面布局之时，我们总是由粗到细逐步思考，通过l列、二列，3列这些基础的布局寿方式来相互组合从而实现复杂的布局。在前面我们曾见过一个网站、该网站便是复杂布局的一个代表，我们不妨以此网站为例，了解一下其复杂布局的实现方式。
我们注意到，网站实际上是一个居中的页面布局，所以内容都是固定宽度。我们曾从1列及二列居中实例中了解过，如果需要整体居中， 就一定需要一个div作为知綱氢箩丰要框架，也就是一个包含容器。而UXMagazine也正是这样，在设计申使用了—个主出作为全页的框架id为container。
在container之中，网站从上至下将内容分为了几个区域，分别放置特定的内容，从上至下形成了一个纵向布局的模式。在纵向布局区域中，主要由以下几个部分构成：
#topBar位于最顶端，其中包含网站的搜索区与频道链接；#header显示网站LOGO)纳etaNotiee网站的信息提示区，显示一段小提示；这里将创建出复杂的页面布局；#magic-1024这个区域用于显示右栏的内容；#footer页脚区，显示了两站的功能链接。天津网站建设
这些div区域都放置在#containeC之中，之间形成了并列关系，而且在任何指定，按顺序从上至下叠放。在这上下叠放的div之中，mary与#magie-1024又形成了，个二列式布局，在CSS代码中，通过对榔rimary设定float:lefL;使得#margic-1024可以浮动到右侧显示从而形成了二列布局。天津网站制作
主内容区#primary中出现了大量的分栏区域看似复杂，其实技术上非常简单，我们不妨继续看一下该区域的div分布。天津做网站
在#primary之中，共放置了20个div区域，一般来说，我们会以为这样的布局是先在其中实现分二列，再在其中一列中再进行分列，乏如此类推，其实不然，UXMagazine网站充分 i利用了浮动定位的特性，我们所看见的20个全部属于并列关系。之所以能够形成这样的布局是因为每一个div都有固定的宽度以及float:left;这样的定位方式。天津网站优化
在件p血唧v宽度-定的情况下第一排的#featureh臚职与#adSponsor的宽度刚好等于#primary的宽度，后面的对象虽然也应该因为浮动的原因跟在adSponsor后面显示，但由于宽度已经被限制了，因此自动转到下一排显示。而第二排的#feature、两个．listltcm及一个#sotmdByte的宽度又刚好达到了却Iimal'y的宽度，因此后面的对象又将换行显示，，以此类推；这样20个dV方块就有序的从左向右排列，-但超过卸ldngy就换行，形成了一个类摊列方式，这种做法也就是二列式布局的延伸，充分利用了浮动原理。而实现这个的进-步核心技术在于对宽度的合理控制，设计师在对这些似对象的宽度计算上非常精确，得它们能够整齐的排列。
而以这个为基础，该页面上的其他部分的布局相信就更加简单了，如nagic- 1024区域仅仅是由3个区域上下排列而成。不过细心的读者一定注意到了该网站中的#magic-1024的名称，为什么会用这个名字呢？如果想知道原因不妨自己使用一下该网站，当我们尝试将IE浏览器窗口变窄时会发现，右边的内容也就是#margin- 1024会消失，转而出现在页面的最下方，由于浏览器窗口大小的改变，将自动流动到下方，看来该网站虽然使用了大屏幕的设计，但是也考虑到了800 X 600分辨率的用户，而实现主要依靠JavaSeript脚本，在页面中当、JavaScript脚本发现浏览器窗口小于1024时，会调用另一套样式表来替代现有的样式表，币这套新样式表则是专门针对800 X 600分辨率用户的，看来考虑得非常周全。