CSS换肤简单示例

来源：互联网发布：淘宝宝贝上架详情编辑编辑：程序博客网时间：2024/05/16 11:29

CSS换肤简单示例

一、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%;
}