Adobe前端开发——结构层概况

来源: 作者:cuikai 2008-03-19 出处:pcdog.com

上一页 1 2 3 

四、产品列表及相关信息块

从直观上看,这是一个三列的布局:

Adobe前端开发——结构层概况(图九)

但实际上Adobe只把这部分内容分成了两个大的块,<div id="contentBody">和<div id="contentPocket">
解析如下:

Adobe前端开发——结构层概况(图十)

然后再用"columns-2-AB-A"和"columns-2-AB-B"这样的共用样式,分别切分出左右布局的结构,最后使用<br class="clear-both"/> 清除浮动,代码非常简洁。

HTML片段:

Adobe前端开发——结构层概况(图十一)

五、底部版权区

相比较上边的内容,这里的结构比较简单

Adobe前端开发——结构层概况(图十二)

整体分成了上下两个块,上部的是站内的链接区域,下部的就是版权信息了

Adobe前端开发——结构层概况(图十三)

内部代码仍然采用了从右向左的写法。

HTML片段:

Adobe前端开发——结构层概况(图十四)



上一页 1 2 3 
上一篇:致有追求的Coder和可爱的部门同事
下一篇:关于H1的探讨