1、移入移出div的变化
<!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>
<style>
div {
width: 100px;
height: 100px;
background: red;
}
.box {
width: 200px;
height: 200px;
background: yellow;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移入移出</title>
</head>
<body>
<div id="div1" onmouseover="document.getElementById('div1').className='box';" onmouseout="document.getElementById('div1').className='';">
</body>
</html>
2、动态改变block的出现
<!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" />
<title>block的变化</title>
</head>
<body>
<label onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';">
<input type="checkbox" />自动登录</label>
<div id="div1">
yaoxiyao
</div>
</body>
</html>
3、点击按钮
<!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>
<style>
input {
background: white;
}
.active {
background: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementsByTagName('input');
var i = 0;
for (i = 0; i < oBtn.length; i++) {
oBtn[i].onclick = function() {
for (i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
} //点击一个按钮是，先把所有的className变为空，即无样式，不是active
this.className = 'active'; //再把当前点击的按钮的className赋值为active
};
}
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
4、选项卡
<!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>
<style>
input {
background: white;
}
.active {
background: yellow;
}
div {
width: 100px;
height: 100px;
background: #CCC;
display: none;
}
/*设为全部隐藏*/
</style>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementsByTagName('input');
var oDiv = document.getElementsByTagName('div');
var i = 0;
//分成两步
for (i = 0; i < oBtn.length; i++) {
oBtn[i].index = i; //第几个按钮的索引值是几
oBtn[i].onclick = function() {
for (i = 0; i < oBtn.length; i++) {
oBtn[i].className = '';
oDiv[i].style.display = 'none'; //所有的选项卡内容隐藏
} //点击一个按钮是，先把所有的className变为空，即无样式，不是active
this.className = 'active'; //再把当前点击的按钮的className赋值为active
//this表示当前点击的那个按钮 ：oBtn[i]
oDiv[this.index].style.display = 'block';
//第一个的第一个div
};
}
};
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input class="active" type="button" value="yao" />
<input type="button" value="xiyao" />
<input type="button" value="yaoxiya" />
<div style="display:block;">姚</div>
<div>希瑶</div>
<div>姚希瑶</div>
</body>
</html>
5、网页换肤
<!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" />
<title>无标题文档</title>
<link id="link1" href="css1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload = function () {
var oLink = document.getElementById("link1");
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
alert(oLink.href)
oBtn1.onclick = function () {
oLink.href = 'css1.css';
}
oBtn2.onclick = function () {
oLink.href = 'css2.css';
}
}
</script>
</head>
<body>
<dl id="message">
<form>
<dt>
<strong>可以换肤的提交框：</strong>
<input id="btn1" type="button" value="皮肤1" />
<input id="btn2" type="button" value="皮肤2" />
</dt>
<dd>输入姓名：
<input class="text" type="text" />
</dd>
<dd>输入密码：
<input class="text" type="password" />
</dd>
<dd>请您留言：
<textarea></textarea>
</dd>
<dd class="center">
<input class="btn" type="submit" value="提交" />
</dd>
</form>
</dl>
</body>
</html>
css自行编写页面的颜色样式即可