现在介绍网页换肤的例子已经数不胜数，自己也没有仔细研究过，刚搞遇到类似这个问题，网上查了资料解决了问题，感觉很有用，就记录了下来和大家分享一下。效果很简单，我就直接讲怎么使用的。

其中用到了jquery.cookie.js

首先是html代码：

1. <div id="header_demo">  
2.     <a id="logo" href="#">Rainweb</a>  
3.         <ul id="skin">  
4.             <li id="skin_0" title="蓝色" class="selected">蓝色</li>  
5.             <li id="skin_1" title="紫色">紫色</li>  
6.             <li id="skin_2" title="红色">红色</li>  
7.             <li id="skin_3" title="天蓝色">天蓝色</li>  
8.             <li id="skin_4" title="橙色">橙色</li>  
9.             <li id="skin_5" title="淡绿色">淡绿色</li>  
10.         </ul>  
11. </div> 

CSS代码：

1. /*头部样式开始*/  
2. #header_demo{  
3.     width:700px;   
4.     height:80px;   
5.     border: 1px solid #AAAAAA;  
6.     margin:10px auto;   
7.     /** background:#3B5998; **/  
8. }  
9. /*logo样式开始*/  
10. #logo {   
11.     float:left;   
12.     margin:0 0 0 10px;   
13.     color:#FFF;   
14.     font-size:3em;   
15.     font-weight:700;  
16.     line-height:80px;  
17. }  
18. /*切换皮肤样式*/  
19. #skin {   
20.     float:rightright;   
21.     margin:10px;   
22.     padding:4px;   
23.     width:120px;   
24.     list-style:none;   
25.     border: 1px solid #CCCCCC;   
26.     background:#FFF;  
27. }  
28. #skin li {   
29.     float:left;   
30.     margin-right:4px;   
31.     width:15px;   
32.     height:15px;   
33.     text-indent:-9999px;   
34.     overflow:hidden;   
35.     display:block;   
36.     cursor:pointer;   
37.     background-image:url(images/theme.gif);   
38. }  
39. #skin_0 { background-position:0px 0px; }  
40. #skin_1 { background-position:15px 0px; }  
41. #skin_2 { background-position:35px 0px; }  
42. #skin_3 { background-position:55px 0px; }  
43. #skin_4 { background-position:75px 0px; }  
44. #skin_5 { background-position:95px 0px; }  
45. #skin_0.selected { background-position:0px 15px; }  
46. #skin_1.selected { background-position:15px 15px; }  
47. #skin_2.selected { background-position:35px 15px; }  
48. #skin_3.selected { background-position:55px 15px; }  
49. #skin_4.selected { background-position:75px 15px; }  
50. #skin_5.selected { background-position:95px 15px; }  

1. //网站换肤  
2. $(function () {  
3.     var $li = $("#skin li");  //查找到元素  
4.     $li.click(function () {   //给元素添加事件  
5.         switchSkin(this.id);//调用函数  
6.     });  
7.     //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了  
8.     var cookie_skin = $.cookie("MyCssSkin");     //获取Cookie的值  
9.     if (cookie_skin) {                          //如果确实存在Cookie  
10.         switchSkin(cookie_skin);     //执行  
11.     }  
12. });  
13. function switchSkin(skinName) {     
14.     $("#"   skinName).addClass("selected")                //当前<li>元素选中  
15.                        .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中  
16.     $("#cssfile").attr("href", "css/skin/"   skinName   ".css"); //设置不同皮肤  
17.     $.cookie("MyCssSkin", skinName, { path: ‘/’, expires: 10 });  //保存Cookie  
18.     alert(skinName);  
19. }  

最后就是一个link文件：

1. <link id="cssfile" type="text/css" href="css/skin/skin_5.css" rel="Stylesheet">