网站换肤

最新推荐文章于 2024-11-04 14:16:34 发布

wwwyan

最新推荐文章于 2024-11-04 14:16:34 发布

阅读量632

点赞数

分类专栏： div+css 文章标签： stylesheet input button css xhtml javascript

div+css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本程序由两个CSS文件和一个页面构成，CSS文件放在CSS文件夹下。源文件如下：

<!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>test css</title>
<link href="css/blue.css" rel="stylesheet" type="text/css" id="cssfile" />
<script language="javascript">
function changeStyle(name){
css=document.getElementById("cssfile");
css.href=name+".css";
}
</script>
</head>
<body>
<div id="header">
<h1>网站换肤</h1>
</div>
<div id="nav">
<input type="button" value="宝石红" οnclick="changeStyle('red');" />
<input type="button" value="经典蓝" οnclick="changeStyle('blue');" />

</div>
<div id="content">
其实我还有二个疑问，就是11出来后有什么优势？想来想去，其实最主要的还是因为Shockwave Director Player能够获得硬件加速能力，Top Feature中的物理引擎倒是可以自己写或第三方，但是硬件加速就太重要了，Flash Player可暂时还无法做到这一点。在图形方面Director能够做效率和效果强于Flash，但弱于真正的游戏引擎的产品。还有一个就是有关 Lingo，还没有仔细去看Director的whitepaper，不知道 Lingo语言是否还在继续发展。实际上个人感觉Lingo的所谓“自然语言”已经不太适应现在的编程开发方式，而AS3反而是越来越好用。以前在学 Director的时候也同时有用Flash，就因为语言问题一时还有点头疼，从语法到整个视觉架构上，记得当时Director中重要的概念就是 Sprite精灵，AS3中也引入了这个概念。是个好产品，继续升级也是好事，希望能够照顾到现在的开发者，打造全新一代的，也来个2.0标签的 Multi-Media Authoring Tool!
</div>
</body>
</html>

CSS文件一个为：red.css：

body{
margin:0px;
padding:0px;
}
#header{
padding:10px;
background-color:#ce0b0b;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
float:left;
height:500px;
}
h1{
font-size:18px;
}
#content{
font-size:12px;
color:#444;
padding:20px;
line-height:180%;
}
#nav{
text-align:center;
padding:10px;
background-color:#eee;
float:left;
height:500px;
width:100px;
}
input{
font-size:12px;
margin-top:20px;
}

另一个blue.css文件：

body{
margin:0px;
padding:0px;
}
#header{
padding:10px;
background-color:#0d3460;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
h1{
font-size:20px;
width:760px;
margin:0 auto;
}
#content{
width:760px;
font-size:12px;
color:#444;
padding:10px;
line-height:180%;
}
#nav{
text-align:center;
margin:0px auto;
padding:10px 0px;
background-color:#eee;
}
input{
font-size:12px;
}
实现的效果是当点击《经典蓝》按钮时，使用深蓝色的头部样式，点击《宝石红》时使用红色风格，并且改变排列样式为左右布局。