windows桌面風(fēng)格頁(yè)面制作點(diǎn)滴

1、Windows桌面風(fēng)格頁(yè)面制作點(diǎn)滴具體細(xì)節(jié)表現(xiàn)：菜單對(duì)與對(duì)話框的凸凹感：我們天天看到的右鍵菜單、任務(wù)欄和開(kāi)始菜單，都有立體感，我們通過(guò)css來(lái)實(shí)現(xiàn)這種效果是很容易的。具體是通過(guò)bder（邊框），在上下左右設(shè)置不同的顏色，以達(dá)到立體感的效果。以下面的例子說(shuō)明：樣式表：.upbderright:#0000002pxsolidbdertop:#FFFFFF2pxsolidbderleft:#FFFFFF2pxsolidbderbottom:#

2、0000002pxsolidbackgroundcol:#D8D8D0在要用立體感的層上加上class=up例子：要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進(jìn)感的層，上、左邊要深，下、右邊要淺。邊框的寬度來(lái)改變立體感的強(qiáng)弱。像快速啟動(dòng)欄處的凸出感不太強(qiáng)，1px就可以了。大家可以看一個(gè)沒(méi)有定義好樣式表的情形。桌面圖標(biāo)：從圖標(biāo)的要求與功能上來(lái)看，它應(yīng)該可以拖動(dòng)

3、、雙擊打開(kāi)鏈接、圖標(biāo)的外觀與鏈接的內(nèi)容相關(guān)等。這樣要求我們來(lái)用每個(gè)層來(lái)定義一個(gè)圖標(biāo)，圖標(biāo)的拖動(dòng)就是層的拖動(dòng)和層的絕對(duì)定位。圖標(biāo)圖片最好是透明的GIF圖片，大小與圖標(biāo)大小一致3232。我們可以用.ICO文件來(lái)轉(zhuǎn)換成.GIF圖形，或者用抓圖軟件來(lái)抓取系統(tǒng)桌面的圖標(biāo)。當(dāng)然如果你的圖像處理的水平不錯(cuò)，你可以做好更好看的圖標(biāo)。雙擊鏈接，我們可以通來(lái)onDblClick（雙擊）鼠標(biāo)事件來(lái)完成。排列圖標(biāo)的實(shí)現(xiàn)，就是再一次對(duì)層的絕對(duì)定位。菜單：菜單每個(gè)

4、項(xiàng)目同樣是用層。主要用到鼠標(biāo)的懸停(onmouseover)、鼠標(biāo)離開(kāi)(onmouseout)來(lái)改變層的背景色，和菜單的隱藏與顯示。開(kāi)菜單欄的圖片用2424大小的GIF圖片，菜單的下一級(jí)目錄菜單可以用1616大小的。同一類(lèi)菜單放在一個(gè)層中來(lái)定位。開(kāi)始菜單中的定位：定位中通常用top:XXleft:XX而開(kāi)始菜單要用bottom:XX來(lái)定位，因?yàn)椴还転g覽器窗口的大小，菜單都在在最底處。開(kāi)始菜單放在一個(gè)表格中，分為兩個(gè)單元格，左邊放在網(wǎng)站標(biāo)

5、記圖片，右鍵放所有的菜單項(xiàng)目：關(guān)機(jī)、注銷(xiāo)、幫助……下面以圖示的形式說(shuō)明開(kāi)始菜單的制作細(xì)節(jié)：具體細(xì)節(jié)表現(xiàn)：菜單對(duì)與對(duì)話框的凸凹感：我們天天看到的右鍵菜單、任務(wù)欄和開(kāi)始菜單，都有立體感，我們通過(guò)css來(lái)實(shí)現(xiàn)這種效果是很容易的。具體是通過(guò)bder（邊框），在上下左右設(shè)置不同的顏色，以達(dá)到立體感的效果。以下面的例子說(shuō)明：樣式表：.upbderright:#0000002pxsolidbdertop:#FFFFFF2pxsolidbderleft

6、:#FFFFFF2pxsolidbderbottom:#0000002pxsolidbackgroundcol:#D8D8D0在要用立體感的層上加上class=up例子：要使層有凸出感，我們可以先選擇好層的背景，層的上、左邊框用比背景顏色淺一些，而層的下、右邊框用比背景深一些。同樣如果定義有凹進(jìn)感的層，上、左邊要深，下、右邊要淺。邊框的寬度來(lái)改變立體感的強(qiáng)弱。像快速啟動(dòng)欄處的凸出感不太強(qiáng)，1px就可以了。大家可以看一個(gè)沒(méi)有定義好樣式表的

7、情形。桌面圖標(biāo)：從圖標(biāo)的要求與功能上來(lái)看，它應(yīng)該可以拖動(dòng)、雙擊打開(kāi)鏈接、圖標(biāo)的外觀與鏈接的內(nèi)容相關(guān)等。這樣要求我們來(lái)用每個(gè)層來(lái)定義一個(gè)圖標(biāo)，圖標(biāo)的拖動(dòng)就是層的拖動(dòng)和層的絕對(duì)定位。圖標(biāo)圖片最好是透明的GIF圖片，大小與圖標(biāo)大小一致3232。我們可以用.ICO文件來(lái)轉(zhuǎn)換成.GIF圖形，或者用抓圖軟件來(lái)抓取系統(tǒng)桌面的圖標(biāo)。當(dāng)然如果你的圖像處理的水平不錯(cuò)，你可以做好更好看的圖標(biāo)。雙擊鏈接，我們可以通來(lái)onDblClick（雙擊）鼠標(biāo)事件來(lái)完成。

8、排列圖標(biāo)的實(shí)現(xiàn)，就是再一次對(duì)層的絕對(duì)定位。菜單：菜單每個(gè)項(xiàng)目同樣是用層。主要用到鼠標(biāo)的懸停(onmouseover)、鼠標(biāo)離開(kāi)(onmouseout)來(lái)改變層的背景色，和菜單的隱藏與顯示。開(kāi)菜單欄的圖片用2424大小的GIF圖片，菜單的下一級(jí)目錄菜單可以用1616大小的。同一類(lèi)菜單放在一個(gè)層中來(lái)定位。開(kāi)始菜單中的定位：定位中通常用top:XXleft:XX而開(kāi)始菜單要用bottom:XX來(lái)定位，因?yàn)椴还転g覽器窗口的大小，菜單都在在最底處