添加有更换皮肤功能 没有具体验证啦 效果可以下载上传的压缩文件(我是新手 写的不好别介意啊)
<html>
<head>
<title>HTML+CSS+JS</title>
<link href="skins0.css" rel="stylesheet" type="text/css" id="cssfile"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changestyle(index) {
var css = document.getElementById("cssfile");
css.href = "skins" + index + ".css";
}
function oneMouseOver(trElement) {
trElement.className = "oneMouseOverTR";
}
function oneMouseOut(trElement) {
trElement.className = "oneTR";
}
function twoMouseOver(trElement) {
trElement.className = "twoMouseOverTR";
}
function twoMouseOut(trElement) {
trElement.className = "twoTR";
}
//-->
</SCRIPT>
</head>
<!-- onemouseout 是当鼠标放在表格中的事件 本例中是变色
onmouseover 是当鼠标移出表格中的事件 本例中是变色
this是当前文本对象调用
onemouseout twoMouseOut twoMouseOver onmouseover 是表格随着鼠标的放置而变色
-->
<body>
<FORM METHOD="POST" ACTION="" name="form1">
<TABLE>
<CAPTION>用户注册</CAPTION>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">用户名:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username"> *
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">昵称:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username1"> *
</TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">密码:</TD>
<TD class="rightTD"><INPUT TYPE="password" NAME="password"> *
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">确认密码:</TD>
<TD class="rightTD"><INPUT TYPE="password" NAME="password1"> *
</TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">安全提示问题:</TD>
<TD class="rightTD">
<select name="prompt">
<option value="0">什么时候你最开心</option>
<option value="1">什么时候你最难受</option>
<option value="2">最喜欢的GG</option>
<option value="3">最喜欢的MM</option>
<option value="4">最喜欢看的电影</option>
<option value="5">你的梦中情人是谁</option>
</select>
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">提示问题答案:</TD>
<TD class="rightTD"><INPUT TYPE="text" NAME="solution"></TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">真实姓名:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="realname">
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">出生日期:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="username">
</TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">籍贯:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="nativeAddress">
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">家族住址:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="address">
</TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">性别:</TD>
<TD class="rightTD">
男<INPUT TYPE="radio" NAME="sex">
女<INPUT TYPE="radio" NAME="sex">
妖<INPUT TYPE="radio" NAME="sex">
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">爱好:</TD>
<TD class="rightTD">
吃饭睡觉<INPUT TYPE="checkbox" NAME="beFondOf">
喝酒打屁<INPUT TYPE="checkbox" NAME="beFondOf">
数钱<INPUT TYPE="checkbox" NAME="beFondOf">
泡美女<INPUT TYPE="checkbox" NAME="beFondOf">
泡帅哥<INPUT TYPE="checkbox" NAME="beFondOf">
美女帅哥一起泡<INPUT TYPE="checkbox" NAME="beFondOf">
</TD>
</TR>
<!--更换皮肤说明:onchange事件是js中对象触发事件,这里有别于onclick
this.options[this.options.selectedIndex].value得到下拉列表中的值
-->
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">更换皮肤:</TD>
<TD class="rightTD">
<select name="sel" οnchange="changestyle(this.options[this.options.selectedIndex].value)">
<option value="0">紫色系</option>
<option value="1">蓝色系</option>
<option value="2">红色系</option>
<option value="3">黄色系</option>
<option value="4">绿色系</option>
</select>
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">电子邮箱:</TD>
<TD class="rightTD">
<INPUT TYPE="text" NAME="email" size="40">
</TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD class="leftTD">个性签名:</TD>
<TD class="rightTD">
<textarea name="sign" rows="10" cols="50"></textarea>
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD class="leftTD">个性头像:</TD>
<TD class="rightTD">
<INPUT TYPE="file" NAME="headImg" size="40">
</TD>
</TR>
<TR class="twoTR" οnmοuseοut="twoMouseOut(this)" οnmοuseοver="twoMouseOver(this)">
<TD colspan="2" class="centerTD"></TD>
</TR>
<TR class="oneTR" οnmοuseοut="oneMouseOut(this)" οnmοuseοver="oneMouseOver(this)">
<TD colspan="2" class="centerTD">
<INPUT TYPE="button" VALUE="提交" ONCLICK="onChirm()"> <INPUT TYPE="reset">
</TD>
</TR>
</TABLE>
</FORM>
</body>
</html>