windows桌面風格頁面制作點滴

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

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

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

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

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

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

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

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