javaScript高級應用（二）
<head>
<title>Demo</title>
<style>
body {
font-family: 宋體;
font-size:12px;
color:#666666;
background:#EBEEF7;
text-align:center;
}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:blue;
text-decoration:underline;
}
a:active {
color:orange
}
h3 {
font-size:14px;
font-weight:bold;
}
pre, p {
color:#1E7ACE;
margin:4px;
}
input, select, textarea {
padding:1px;
margin:1px;
font-size:12px;
}
/********待完成**********/
select optgroup {
font-weight:light;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:450px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px solid #A4CDF2;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #A4CDF2;
background:#EBEEF7;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #A4CDF2;
background:#EBEEF7;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
hr {
size:0px;
color:orange;
width:100%;
}
table {
border-collapse: collapse;
font-size: 9pt;
}
td {
line-height: 12pt;
margin:0pt
}
th {
line-height: 20pt;
margin:0pt
}
.1px {
border:1px solid #A4CDF2;
}
.1px td{
border:1px solid #A4CDF2;
}
.1px th{
border:1px solid #A4CDF2;
}
/**************************按鈕****************************/
/*************************BEGIN****************************/
.btn1 {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<script language="javaScript">
function onMouserOver() {
this.className="btn1_mouseover";
}
function onMouserOut() {
this.className="btn1";
}
function onMouserDown() {
this.className="btn3_mousedown";
}
function button_event(){
var buttons = document.getElementsByTagName("input");
for(i=0; i<buttons.length; i++) {
if(buttons[i].type=="button") {
buttons[i].onmouseover=onMouserOver;
buttons[i].onmouseout=onMouserOut;
buttons[i].onmousedown=onMouserDown;
}
}
}
</script>
</head>
<body onLoad="button_event()">
<div id="formwrapper">
<fieldset>
<legend>用戶登陸</legend>
<div>
<label>用戶名：</label>
<input type="text" name="name" size="18" maxlength="30">*(最多30個字符)
</div>
<div>
<label>密碼：</label>
<input type="password" name="password" size="18" maxlength="30"> <a href="#">修改密碼</a>
</div>
<div>
<label>性別：</label>
<select>
<optgroup label="一般">
<option value="M">男</option>
<option value="F">女</option>
</optgroup>
<optgroup label="特例">
<option value="N">中性</option>
</optgroup>
</select>
</div>
<div>
<label>保存用戶名：</label>
<input type="radio" name="saved">是
<input type="radio" name="saved">否
</div>
<div>
<label><input type="button" class="btn1" value="確定"></label>
<label><input type="button" class="btn1" value="清空"></label>
</div>
</fieldset>
<fieldset>
<legend>人員列表</legend>
<div>
<br>
<table width="70%" align="center" class="1px">
<tr>
<th>序列</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center" title="maxEric">大車</td>
<td align="center">24</td>
<td align="center">男</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">Eric</td>
<td align="center">24</td>
<td align="center">男</td>
</tr>
<tr>
<td align="center">總計</td>
<td colspan="3" align="center">2</td>
</tr>
</table>
</div>
</fieldset>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章