Ferris这个教程学习笔记:js示例2.1:网页换肤

思路:
换肤功能主要的技巧在切换不同一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="width: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>
View Code 
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;    
}

 

 

 

 

 

 

 

 

posted @ 2013-12-11 15:49  kaka100  阅读(489)  评论(0)  编辑  收藏  举报