思路:
换肤功能主要的技巧在切换不同一css文件
不同背色颜色切换..
<link href="css/red.css" rel="stylesheet" type="text/css">
<link href="css/blue.css" rel="stylesheet" type="text/css">
<link href="css/green.css" rel="stylesheet" type="text/css">
通过js切换三个不同的样式文章实现网页换肤效果
//------------------------------------------------
//知识点1:
阻止超链接默认跳转行为
1:<a href="javascript:;"></a>
2:<a href="javascript:void(0);"></a>
//知识点2:
修改元素css属性的值
元素.className = 值;
//知识点3:
知识点:添加公共的css样式属性
所有的使用到的标签，内补丁外补丁清0
//知识点4:
Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支撑。
它可以设置或检索对象的缩放比例。除此之外，
它还有其他一些小感化，比如触发ie的hasLayout属性，
清除浮动、清除margin的重叠等。
//知识点5:
!important
因为不同浏览器对样式的解析有些不一样，所以要区别FF，IE7，IE6：
background:green !important; background:orange; *background:blue;
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
另外再补充一个，下划线”_“,IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分firefox，IE7，IE6
background:green!important; *background:orange; _background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在搜索前面，IE7的写在中间，IE6的写在最后面。
知识点6:
overflow:hidden
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>网页换肤----知识导入overflow:hidden;zoom:1:</title> <style type="text/css"> </style> </head> <body> <div id="box" style="50px;height:50px;background:red;overflow:hidden1;zoom:1;">aadfadf a fasdfasdfadfadfsasdfadsfadfadsfasdfasdfadf</div> </body> </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 4 <title>网页换肤</title> 5 <style type="text/css"> 6 /*知识点:添加公共的css样式属性*/ 7 /*所有的使用到的标签，内补丁外补丁清0*/ 8 body,ul,li{margin:0;padding:0;} 9 body{font:12px/1.5 Thoma;} 10 li{list-style-type:none;} 11 a:link,a:visited{text-decoration:none;} 12 a:hover{text-decoration:underline;} 13 14 15 16 #outer{width:500px;margin:0 auto;overflow:hidden;zoom:1;} 17 #skin,#nav{overflow:hidden;zoom:1;} 18 #skin{margin:10px 0;} 19 #skin li{float:left;width:6px;height:6px;cursor:pointer;overflow:hidden; 20 margin-right:10px;text-indent:-999px;border-width:4px;border-style:solid;} 21 #skin li.current{background:#fff!important;} 22 23 #red{border-color:red;background:red;} 24 #green{border-color:green;background:green;} 25 #black{border-color:black;background:black;} 26 27 #nav{border:1px solid #fff;} 28 #nav li{float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;} 29 #nav li.last{width:83px;border-right-width:0;} 30 #nav li a{color:#fff;} 31 </style> 32 <link href="css/green.css" rel="stylesheet" type="text/css"> 33 </head> 34 <body> 35 <div id="outer"> 36 <ul id="skin"> 37 <li id="red" title="红色">红</li> 38 <li id="green" class="current" title="绿色">绿</li> 39 <li id="black" title="黑色">黑</li> 40 </ul> 41 <ul id="nav"> 42 <li><a href="javascript:;">新闻</a></li> 43 <li><a href="javascript:;">娱乐</a></li> 44 <li><a href="javascript:;">体育</a></li> 45 <li><a href="javascript:;">电影</a></li> 46 <li><a href="javascript:;">音乐</a></li> 47 <li class="last"><a href="javascript:;">旅游</a></li> 48 </ul> 49 </div> 50 <script type="text/javascript"> 51 52 53 window.onload = function(){ 54 var oSkin = document.getElementById("skin"); 55 var lis = oSkin.getElementsByTagName("li"); 56 var link = document.getElementsByTagName("link")[0]; 57 var size = lis.length; 58 for(var i=0;i<size;i++){ 59 lis[i].onclick = function(){ 60 for(p in lis)lis[p].className = ""; 61 this.className = "current"; 62 link.href = "css/"+this.id+".css"; 63 }; 64 } 65 66 }; 67 68 </script> 69 </body> 70 </html>
red.css
body{
background:#A3C5A8;
}
#nav{
background:red;
border-color:#fff;
}
#nav li{
border-color:#fff;
}
black.css
body{
background:#A3C5A8;
}
#nav{
background:blue;
border-color:#fff;
}
#nav li{
border-color:#fff;
}
green.css
body{
background:#A3C5A8;
}
#nav{
background:green;
border-color:#fff;
}
#nav li{
border-color:#fff;
}