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

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

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

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

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

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

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

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

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