demo08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS事件处理</title>
<script src="js/demo08.js" type="text/javascript"></script><!--引入js文件-->
<link href="css/demo08.css" rel="stylesheet" type="text/css"/><!--引入css文件-->
</head>
<body>
<div>
<img src="img/1.jpg" id="img1" />
</div>
<div>
请输入密码:<input type="password" id="input1"/> <img id="img2" src="img/closeeye.png" />
</div>
<div id="div1">
点击我,会有惊喜哦~
</div>
<div>
<input type="checkbox" id="chk"/>我已同意.....<!--复选框-->
</div>
<div>
<button type="button" id="btn1" disabled="disabled">Next</button><!--disabled,不可用-->
</div>
<div>
<table>
<tr>
<th>
<input type="checkbox" id="selectAll"/>
</th>
<th>用户名</th>
<th>电话号码</th>
</tr>
<tr>
<td>
<input type="checkbox" name="chks"/>
</td>
<td>张三</td>
<td>18888888</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chks"/>
</td>
<td>张三</td>
<td>18888888</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chks"/>
</td>
<td>张三</td>
<td>18888888</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chks"/>
</td>
<td>张三</td>
<td>18888888</td>
</tr>
</table>
</div>
<div>
请输入用户名:<input type="text" id="input2" />
</div>
<div id="div2">
当鼠标悬停时,样式会发生变化
</div>
<div>
省份:
<select id="province">
<option value="-1">---请选择---</option><!--下拉菜单-->
<option value="0">辽宁省</option>
<option value="1">吉林省</option>
<option value="2">黑龙江省</option>
</select>
城市:
<select id="city">
<option value="-1">---请选择---</option>
</select>
</div>
</body>
</html>
demo08.css
#img1{
width: 400px;
height: 300px;
}
#img2{
vertical-align: middle;
}
#div1{
width: 300px;
height: 50px;
border: 2px solid green;
}
table,th,td{
border: 1px solid gray;
border-collapse: collapse;
}
.css1{
background-color: #808080;
}
.css2{
background-color: white;
}
.css3{
background-color: aqua;
}
