网页换肤 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
 6 <meta name="description" content=""/>
 7 <meta name="keywords" content=""/>
 8 <title></title>
 9 <link href="green.css" rel="stylesheet" type="text/css">
10 <script type="text/javascript" src=""></script>
11 <style type="text/css">
12 　　body,ul,li{margin:0;padding:0;}
13 　　html,body{height:100%;}
14 　　body{font:12px/1.5 Tahoma;}
15 　　li{list-style:none;}
16 　　a{text-decoration:none;}
17 　　#skin,#nav{overflow:hidden;zoom:1;}
18 　　#skin{margin:10px 0;margin-left:28%;}
19 　　#skin li{float:left;width:6px;height:6px;cursor:pointer;overflow:hidden;margin-right:10px;text-indent:-9999px;border-width:4px;border-style:solid;}
20 　　#skin li.current{background:#fff!important;}
21 　　#red{border-color:red;background:red;}
22 　　#green{border-color:green;background:green;}
23 　　#black{border-color:black;background:black;}
24 　　#nav{width:493px;margin:auto;}
25 　　#nav li{float:left;width:81px;line-height:25px;height:25px;text-align:center;border:1px solid #fff;border-right:0;}
26 　　#nav li a{color:#fff;}
27 </style>
28 <script type='text/javascript'>
29 　　window.onload = function(){
30 　　　　var link = document.getElementsByTagName('link')[0];
31 　　　　var skin = document.getElementById('skin').getElementsByTagName('li');
32 　　　　for(var i=0;i<skin.length;i++){
33 　　　　　　skin[i].onclick = function(){
34 　　　　　　for(var p in skin) skin[p].className = '';
35 
36 
37 　　　　　　//className 对应css的class类样式的一个属性
38 　　　　　　this.className = 'current';
39 
40 
41 　　　　　　//查找link外部样式中的链接
42 　　　　　　link['href'] = this.id + '.css';
43 　　　　}
44 
45 　　}
46 }
47 </script>
48 </head>
49 <body>
50 　　<ul id="skin">
51 　　　　<li id="red" title="红色">红</li>
52 　　　　<li id="green" class="current" title="绿色">绿</li>
53 　　　　<li id="black" title="黑色">黑</li>
54 　　</ul>
55 　　<ul id="nav">
56 　　　　<li><a href="javascript:;">新闻</a></li>
57 　　　　<li><a href="javascript:;">娱乐</a></li>
58 　　　　<li><a href="javascript:;">体育</a></li>
59 　　　　<li><a href="javascript:;">电影</a></li>
60 　　　　<li><a href="javascript:;">音乐</a></li>
61 　　　　<li class="last" style="border:1px solid #fff;"><a href="javascript:;">旅游</a></li>
62 　　</ul>
63 </body>
64 </html>

 

posted on 2014-05-16 10:55  遇上  阅读(145)  评论(0)    收藏  举报

导航