網站div css按鈕效果設計

　　網站用div css重新設計好之後，速度和美觀度都會有提高，但一定要做好相容性測試。
　　用div設計按鈕時，用於效果更漂亮，且簡單。網站div css,即便你不在全站用，局部效果也不錯。

　　現在講解按鈕效果中的一種方法。如果靈活運用的話，div　css網站設計的按鈕，讓你的網站增彩不少。

　　先看從www.cunbuluo.com
(村部落)裡截取的一段樣式表：

　　#prolist{ letter-spacing:2px; font-size:14px; font-weight:bold}
　　#prolist ul{ margin:0px; padding:0px}
　　#prolist li{ height:35px; line-height:35px; background:url(images/pro_bg.gif) center no-repeat; margin:4px 0px 4px 0px}
　　#prolist li a{ display:block; width:165px}
　　#prolist li a:link {color: #dd0000; text-decoration: none;}
　　#prolist li a:visited { text-decoration: none;color: #dd0000;}
　　#prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat;}
　　#prolist li a:active { text-decoration: none;color: #dd0000;}

　　這裡要注意的是div css元素的每一級的關係。再注意的就是紅色部分，它是使實現按鈕效果的的主要樣式表。其中#prolist li a{ display:block; width:165px}中display:block一定要設定，不然話，切換背景的效果不回明顯。這樣，用div css設計按鈕背景的轉場效果。

　　另外也可以改裡邊的hover樣式為#prolist li a:hover {text-decoration: underline;color: #ff0000; background:url(images/pro_bg2.gif) center no-repeat; position:relative;left:1px;top:1px}，這樣就加上了字元下沉的效果。背景再設定好，整個按鈕都會有下滑感。