-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path网页换肤.html
101 lines (93 loc) · 1.8 KB
/
网页换肤.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
body,ul,li{margin:0;padding:0;}
html,body{height:100%;}
body{font:12px/1.5 Tahoma;}
li{list-style-type:none;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;color:yellow;}
#out{
width:500px;
margin:0 auto;
overflow:hidden;
zoom:1;
}
#skin,#nav{
overflow:hidden;
zoom:1;
}
#skin{
margin:10px 0;
}
#skin li{
float:left;
width:6px;
height:6px;
cursor:pointer;
overflow:hidden;
margin-right:10px;
text-indent:-9999px;
border-width:4px;
border-style:solid;
}
#skin li.current{background:#fff!important;}
#red{border-color:red;background:red;}
#green{border-color:green;background:green;}
#black{border-color:black;background:black;}
#nav{border:1px solid #fff;}
#nav li{float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;}
#nav li.last{width:83px;border-right-width:0;}
#nav li a{color:#fff;}
</style>
<link href="green.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function()
{
var oLink=document.getElementsByTagName("link")[0];
var oSkin=document.getElementById("skin").getElementsByTagName("li");
for(var i=0;i<oSkin.length;i++)
{
oSkin[i].onclick=function()
{
for(var p in oSkin) oSkin[p].className="";
this.className="current";
oLink['href']=this.id+".css";
}
}
}
</script>
</head>
<body>
<div id="out">
<ul id="skin">
<li id="red" title="红色">红</li>
<li id="green" class="current" title="绿色">绿</li>
<li id="black" title="黑色">黑</li>
</ul>
<ul id="nav">
<li>
<a href="todo">莹草</a>
</li>
<li>
<a href="todo">莹草</a>
</li>
<li>
<a href="todo">莹草</a>
</li>
<li>
<a href="todo">莹草</a>
</li>
<li>
<a href="todo">莹草</a>
</li>
<li class="last">
<a href="todo">莹草</a>
</li>
</ul>
</div>
</body>
</html>