在制作網(wǎng)頁(yè)的時(shí)候，我們常常會(huì)提到層。這里的層是指在中，通過(guò)對(duì)它的應(yīng)用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象在垂直方向互相重疊的效果，比如使用的朋友一定到騰訊主頁(yè)瀏覽過(guò)，其下拉菜單很有特色，這就是利用層的應(yīng)用來(lái)實(shí)現(xiàn)的。其做法很簡(jiǎn)單，有不少網(wǎng)友在網(wǎng)頁(yè)中使用層便可以輕松實(shí)現(xiàn)，但你是否注意到當(dāng)你改變顯示器分辨率時(shí)，你的層還是在原來(lái)的位置上、網(wǎng)頁(yè)能夠自動(dòng)地適應(yīng)用戶設(shè)置的分辨率嗎？我想如果你不知道層的絕對(duì)定位和相對(duì)定位的概念，你是做不出騰訊主頁(yè)上的下拉菜單效果的，下面就結(jié)合實(shí)例來(lái)介紹一下層的精確定位。

　　招數(shù)一：表格定位法

　　步驟1：打開(kāi)dreamweaver3，新建一個(gè)頁(yè)面，使用快捷鍵“ctrl+alt+t”插入一個(gè)兩行一列的表格，設(shè)置第二行的目的就是為了放置層，使其相對(duì)表格定位。輸入文字同時(shí)設(shè)置表格屬性。

　　步驟2：將光標(biāo)移入第二行表格中，在這行中插入一個(gè)層，打開(kāi)其屬性面板，將l、t值刪除，使其為空。

　　這兩個(gè)參數(shù)絕對(duì)不能有數(shù)值，否則將不能實(shí)現(xiàn)層精確定位。當(dāng)然這時(shí)的層參數(shù)已定，作為父層時(shí)該層是不能移動(dòng)的，但可以使用光標(biāo)改變其大小。

　　步驟3：將光標(biāo)定義在父層中，再次插入一個(gè)層并設(shè)置層內(nèi)容。當(dāng)你使用f2打開(kāi)層控制面板時(shí)會(huì)看到位于父層底下的子層，作為子層是可以拖動(dòng)的，因?yàn)樗鄬?duì)于父層定位。

　　步驟4：為主菜單設(shè)置鼠標(biāo)響應(yīng)事件，顯示當(dāng)鼠標(biāo)移到和離開(kāi)該主菜單時(shí)層的顯示方式就可以了。f12預(yù)覽并改變分辨率，看看是否你的子菜單沒(méi)有錯(cuò)置。

　　招數(shù)二：css定位法

　　上述方法畢竟不是專業(yè)設(shè)計(jì)師的期望，我們可以做一個(gè)css相對(duì)定位的定義方式，將相對(duì)定位模型(比如表格)定義為這個(gè)css屬性。

　　步驟1：使瀏覽器以相對(duì)定位模型左上角作為原點(diǎn)，建立新的坐標(biāo)系。再在這個(gè)相對(duì)定位模型下級(jí)插入層，使之絕對(duì)于該相對(duì)定位模型定位。當(dāng)然該層也是不可拖動(dòng)的，改變其位置可以直接在其屬性面板上輸入left top的數(shù)值。

　　步驟2：按“shift+f11”打開(kāi)css styles面板，點(diǎn)擊“new style”按鈕，在彈出的new style窗口中定義一個(gè)名稱為.pos的css屬性，并且選擇make custom style的type類型和this document 0nl的define類型，確認(rèn)進(jìn)入style defintion for .pos窗口，選取positioning定義type為relative確定。

　　步驟3：選取定義好的表格，右鍵點(diǎn)擊css style面板中的.pos，彈出菜單中執(zhí)行apply命令即可。使該相對(duì)定位模型(表格)建立新的坐標(biāo)系，只要我們?cè)谄渲胁迦雽樱⒃O(shè)置層內(nèi)容和主菜單的鼠標(biāo)響應(yīng)事件就可以使層實(shí)現(xiàn)相對(duì)定位了。

　　以上兩招，大家不妨都試一試，若舉一反三的話，一定可以做出各種使用層且自動(dòng)適應(yīng)用戶分辨率設(shè)置的網(wǎng)頁(yè)效果來(lái)！