很多時(shí)候看到別人網(wǎng)臟那上有很多種風(fēng)格覺得特酷，點(diǎn)一下，整個(gè)網(wǎng)站色調(diào)就全變了。這幾天給互動(dòng)123寫了3套風(fēng)格，感覺有點(diǎn)意思，所以哪來和大家分享一下我的設(shè)計(jì)樂趣。

　　應(yīng)為我是做企業(yè)站點(diǎn)的，目前已經(jīng)辭職了等待離職的這段時(shí)間整理自己作品才發(fā)現(xiàn)那些小站站更本拿不出手，所以就想做個(gè)大的站點(diǎn)，剛好在現(xiàn)在和朋友也在策劃做個(gè)大站，所以HuDong123就出爐了。 前臺(tái)首頁(yè)布局弄好后由于寫程序的沒空，我只好沒事給這個(gè)首頁(yè)寫風(fēng)格。

　　至于頁(yè)面怎么寫的我這里不具體說。這里只說風(fēng)格的編寫。

 

　　首先，分析下這個(gè)頁(yè)面所風(fēng)格所涉及的內(nèi)容。
　　背景色。文字顏色。鏈接顏色。logo 。導(dǎo)航條。模塊邊框。模塊名稱背景。部分項(xiàng)目背景。

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

　　于是有以下樣式

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

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

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

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

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

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

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

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

/*主要導(dǎo)航條文字鏈接*/
#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;}

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

/*flash焦點(diǎn)廣告下面的風(fēng)格線*/
#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) ;}

/*友情連接圖片邊框風(fēng)格*/
#main2_r .show1 li a img {border:solid 1px #e1e1e1;}

/*回字布局左邊模塊*/
#main2_l .show1 img { border:solid 1px #e1e1e1; }
#main2_l .show1 ul li {background-image:url(blue/show1_libg.gif);}
#main2_l .show2 { background:#EEF6FE;}
#main2_l .show2 li a { color:#0066CC;}
#main2_l .show2 li a:hover { color:#0066CC;}

/*版權(quán)顏色定義*/
#foot { color:#999999;}

————————————————————————————————————————

　　上面的CSS都只有顏色 邊框和 背景屬性。這樣我們改變這些屬性就可以完全改變整個(gè)網(wǎng)站的風(fēng)格了。
　　根據(jù)上面的CSS文件，我只要畫不到10分鐘就可以編寫一個(gè)新樣式。比如說我已經(jīng)編好的酷黑風(fēng)格。
　　具體實(shí)例查看網(wǎng)址：www.hudong123.com

　　背景換成#333.
　　文字顏色#fff;
　　鏈接顏色#ccc,
　　模塊邊框換成#f90;
　　模塊的標(biāo)題和模塊邊框顏色相似換成#f93；
　　模塊標(biāo)題字體顏色變成#ff0；
　　二號(hào)標(biāo)題變成#fff；
　　各個(gè)模塊里面的圖片邊框風(fēng)格換成#fff；
　　三欄右邊欄和 回字布局的左邊布局種有2快需要設(shè)定背景的地方，把這2快的背景設(shè)定頂#000。
　　整個(gè)風(fēng)格就完成了。很簡(jiǎn)單把.這樣頁(yè)面就似乎有一個(gè)調(diào)色板一樣隨時(shí)可以調(diào)換顏色.

　　過年了就用寫一套紅色，春天了寫一套綠色，夏天寫一套碧藍(lán)色，秋天寫一套金黃色，冬天寫一套銀白色。呵呵，一切都很簡(jiǎn)單。