CSS换肤简单示例
2007-11-06 20:24 阅读8 评论0
一、HTML页面：
<!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=gb2312" />
<title>无标题 1</title>
<link href="cssRed.css" rel="stylesheet" type="text/css" id="cssfile" />
<script language="javascript" type="text/javascript">
function ChangeCSS(color){
var css=document.getElementById( "cssfile");
css.href=color;
}
</script>
</head>
<body>
<div id="layout">
<div id="nav">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
<div id="content">
关于中国万维网联盟(W3CHINA)
2003-06-20:W3CHINA 中国万维网联盟是一个致力于研究、传播、讨论W3C标准的开放组织，成立于二零零三年六月二十日。作为一个开放组织，各界人士均可申请加入中国万维网联盟 (W3CHINA)。中国万维网联盟(W3CHINA)旨在为Web应用开发者、研究者提供一个学习、研究、讨论W3C与Web技术的平台。我们欢迎各界人士的加入。
</div>
<div id="footer">
<input type="button" id="btnRed" onclick="ChangeCSS('cssRed.css');" value="红色" />
<input type="button" id="btnGreen" onclick="ChangeCSS('cssGreen.css');" value="绿色" />
</div>
</div>
</body>
</html>
二、CSS文件 - 红色调
html{
background-color:#990000;
height:100%;
}
body{
height:100%;
margin:0;
padding:0;
}
#layout{
margin:0 auto;
width:700px;
height:100%;
border:1px green dotted;
}
#nav{
float:right;
width:20%;
background-color:#CC3300;
height:95%;
}
#content{
width:80%;
height:95%;
float:right;
background-color:#FFCCCC;
}
#footer{
width:100%;
text-align:center;
height:5%;
}
三、CSS文件 - 绿色调
html{
background-color:#006600;
height:100%;
}
body{
height:100%;
margin:0;
padding:0;
}
#layout{
margin:0 auto;
width:700px;
height:100%;
border:1px red dotted;
}
#nav{
float:left;
width:20%;
background-color:#339966;
height:95%;
}
#content{
width:80%;
height:95%;
float:left;
background-color:#00CC66;
}
#footer{
width:100%;
text-align:center;
height:5%;
}