网页换肤
<!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=UTF-8"/>
<meta
name="description" content=""/>
<meta name="keywords"
content=""/>
<title></title>
<link
href="green.css" rel="stylesheet" type="text/css">
<script
type="text/javascript" src=""></script>
<style
type="text/css">
body,ul,li{margin:0;padding:0;}
html,body{height:100%;}
body{font:12px/1.5
Tahoma;}
li{list-style:none;}
a{text-decoration:none;}
#skin,#nav{overflow:hidden;zoom:1;}
#skin{margin:10px
0;margin-left:28%;}
#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{width:493px;margin:auto;}
#nav
li{float:left;width:81px;line-height:25px;height:25px;text-align:center;border:1px
solid #fff;border-right:0;}
#nav li a{color:#fff;}
</style>
<script type=‘text/javascript‘>
window.onload =
function(){
var link =
document.getElementsByTagName(‘link‘)[0];
var skin =
document.getElementById(‘skin‘).getElementsByTagName(‘li‘);
for(var
i=0;i<skin.length;i++){
skin[i].onclick =
function(){
for(var p in skin) skin[p].className = ‘‘;
//className 对应css的class类样式的一个属性
this.className = ‘current‘;
//查找link外部样式中的链接
link[‘href‘] =
this.id + ‘.css‘;
}
}
}
</script>
</head>
<body>
<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="javascript:;">新闻</a></li>
<li><a
href="javascript:;">娱乐</a></li>
<li><a
href="javascript:;">体育</a></li>
<li><a
href="javascript:;">电影</a></li>
<li><a
href="javascript:;">音乐</a></li>
<li class="last"
style="border:1px solid #fff;"><a
href="javascript:;">旅游</a></li>
</ul>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
