很多時候看到別人網臟那上有很多種風格覺得特酷，點一下，整個網站色調就全變了。這幾天給互動123寫了3套風格，感覺有點意思，所以哪來和大家分享一下我的設計樂趣。

　　應為我是做企業站點的，目前已經辭職了等待離職的這段時間整理自己作品才發現那些小站站更本拿不出手，所以就想做個大的站點，剛好在現在和朋友也在策劃做個大站，所以HuDong123就出爐了。 前臺首頁布局弄好后由于寫程序的沒空，我只好沒事給這個首頁寫風格。

　　至于頁面怎么寫的我這里不具體說。這里只說風格的編寫。

　　首先，分析下這個頁面所風格所涉及的內容。
　　背景色。文字顏色。鏈接顏色。logo 。導航條。模塊邊框。模塊名稱背景。部分項目背景。

　　所以我們從原來的原來的整個CSS文件把這些需要設定風格的樣式給提取出來。www.hudong123.com/style/all.css 這里是全部的默認風格的CSS。在這個文件css文件種把我所需要定義的這些風格樣式提取出來，

　　于是有以下樣式

/*背景*/
body{ background:#FFF; }

/*連接*/
a { color:#000000; text-decoration:none; }
a:hover { text-decoration:underline;}

/*頭部右邊發布欄背景風格*/
#topr {background-image:url(blue/topr.png);}

/*logo風格*/
#top { background-image:url(blue/logo.png);}

/*工作室導航條背景*/
#topl #nve1 {background-image:url(blue/nve1_bg.gif);}

/*工作室導航條左右弧度*/
#topl #nve1 #l {background-image:url(blue/nve1_left.gif); }
#topl #nve1 #r {background-image:url(blue/nve1_right.gif);}

/*工作室導航條文字鏈接*/
#topl #nve1 li a { color:#333;}
#topl #nve1 li a:hover { color:#F00;}

/*主要導航條背景*/
#topl #nve2 {background-image:url(blue/nve2_bg.gif);}

/*主要導航條文字鏈接*/
#topl #nve2 li a {color:#FFF;}
#topl #nve2 li a:hover { color:#000; background-image: url(blue/nve2_libg.png);}

/*邊框*/
.bk { border:solid 1px #AEDEF2;}

/*標題欄目*/
.bk h1{color:#1974C8; background:#EEF6FE;}
.bk h2 {color:#333333;}

/*flash焦點廣告下面的風格線*/
#main1_l .show1 { border-bottom:1px solid #AEDEF2; }

/*主體3欄中間欄目*/
#main1_m .show2 img { border:solid 1px #e1e1e1;}
#main1_m .show2 ul li {background-image:url(blue/show1_libg.gif);}

/*主體3欄右邊欄目*/
#main1_r .show1 p img {border:solid 1px #e1e1e1; }
#main1_r .show1 ul li {background-image:url(blue/show1_libg.gif) ;}
#main1_r .show2 { background:#EEF6FE;}
#main1_r .show2 li {background-image:url(blue/show1_libg.gif) ;}