一、概況

Adobe采用了每刷新一次頁(yè)面，調(diào)用一款產(chǎn)品的方式，給訪(fǎng)問(wèn)者展示不同的內(nèi)容。

首頁(yè)分成了4個(gè)區(qū)塊：
A.頂部導(dǎo)航區(qū)、B.產(chǎn)品展示區(qū)、C.產(chǎn)品列表及相關(guān)信息塊、D.底部版權(quán)區(qū)
解析如下：

HTML片段：

二、頂部導(dǎo)航區(qū)

導(dǎo)航區(qū)域，Adobe用"dt"和"dd"分出了4個(gè)小塊：

解析如下：

不太符合國(guó)內(nèi)開(kāi)發(fā)習(xí)慣的是，他們采用了從右向左的寫(xiě)法，先給出了最右側(cè)LOGO區(qū)域的<dt id="adobe-logo">標(biāo)簽，然后是<dd id="site-search">搜索區(qū)域，最后才是上下并列的兩個(gè)左側(cè)導(dǎo)航區(qū)域。值得借鑒的是，Adobe在導(dǎo)航區(qū)的下拉菜單運(yùn)用了"dl"內(nèi)嵌套"ul"的方法來(lái)實(shí)現(xiàn)效果，在國(guó)內(nèi)的網(wǎng)站中這種寫(xiě)法目前尚不多見(jiàn)。

HTML片段：

三、產(chǎn)品展示區(qū)

這個(gè)區(qū)塊主要是通過(guò)FLASH來(lái)作為主要的表現(xiàn)形式

通過(guò)JS中FMARotator參數(shù)對(duì)背景層及對(duì)應(yīng)產(chǎn)品FLASH路徑的指定，來(lái)實(shí)現(xiàn)每刷新一次頁(yè)面，更換一下產(chǎn)品展示區(qū)域的內(nèi)容。

HTML片段：

四、產(chǎn)品列表及相關(guān)信息塊

從直觀上看，這是一個(gè)三列的布局：

但實(shí)際上Adobe只把這部分內(nèi)容分成了兩個(gè)大的塊，<div id="contentBody">和<div id="contentPocket">
解析如下：

然后再用"columns-2-AB-A"和"columns-2-AB-B"這樣的共用樣式，分別切分出左右布局的結(jié)構(gòu)，最后使用<br class="clear-both"/> 清除浮動(dòng)，代碼非常簡(jiǎn)潔。

HTML片段：

五、底部版權(quán)區(qū)

相比較上邊的內(nèi)容，這里的結(jié)構(gòu)比較簡(jiǎn)單

整體分成了上下兩個(gè)塊，上部的是站內(nèi)的鏈接區(qū)域，下部的就是版權(quán)信息了

內(nèi)部代碼仍然采用了從右向左的寫(xiě)法。

HTML片段：