一,简单版

  

<body>
<header>
     <img src="img/2.jpg" alt="" style="width:200px;height:60px;float:left;">
     <select id="btn">
	<option value="">请选择</option>
        <option>背景春</option> 
        <option>背景夏</option>
        <option>背景秋</option>
        <option>背景冬</option>
    </select>
    <select id="btn1">
     </select>
     <h1><i>-春之情-主页导航</i></h1>
     <span><a href="#">换肤学习</a></span>    
     <img src="img/2.jpg" alt="" style="width:200px;height:60px;float:right;">      
     <img src="img/loading.gif" alt="" style="width:60px;height:60px;float:right;">
</header>
	<div id="content">	
	   <img src="img/bg1.jpg" alt="图片" >
	</div>
	<script src=script/jquery-1.11.3.js></script>
	<script>
	//原生js实现
	function changeskin(imgurl){
            var imgobj=document.getElementsByTagName('img')	;
             imgobj[3].src=imgurl;	 
	}
		window.onload=function(){
			var btnobj=document.getElementById("btn");
			var btnobj1=document.getElementById("btn1");		
			btnobj.addEventListener("change",function(){  
			var index=btnobj.selectedIndex;	
				
			var imgurl=[" ","img/bg3.jpg","img/bg2.jpg","img/bg4.jpg","img/bg5.jpg"];
			//使用DOM方式新增选项
			var newoption=document.createElement("option");
			    newoption.appendChild(document.createTextNode("新增选项"));                         btnobj.appendChild(newoption);
			
                        var text=btnobj.options[index].text;//获得select选项中的文本值	
			 //使用selected属性设置为true,来选择选项
			   if(btnobj.options[index].selected){ changeskin(imgurl[index]);}

	
            
			      //使用remove方法移除
			     btnobj.remove(2);
        
}
		
	</script>
</body>

实现效果图:

   初始页面:

    wKiom1cLETCQWx42AAK6zTHw8EU060.jpg选择选项中的,背景冬:

wKiom1cLEUySQhCxAALQjV5u2hY092.jpg背景换为:

wKioL1cLEjGQeY9FAAFuPZxk1Qg260.jpg

总结:这是学习几个简单方法,做的简单小例子,在后期,还会继续完善,目标:

    (1)使用jquery实现这个效果

    (2)结合cookie实现页面定制效果。