JS事件处理

最新推荐文章于 2021-02-12 21:26:31 发布

婉菡

最新推荐文章于 2021-02-12 21:26:31 发布

阅读量105

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113789494

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

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"/>&nbsp;&nbsp;&nbsp;<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;
}

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS事件处理

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS事件处理</title> <script src="js/demo08.js" type="text/javascript"></script> <link href="css/demo08.css" rel="styles
复制链接

扫一扫