第三十二天：js实现换肤功能（最简版+修改版）

最新推荐文章于 2022-03-27 09:17:07 发布

迷失的夜行者

最新推荐文章于 2022-03-27 09:17:07 发布

阅读量518

点赞数 1

分类专栏： javaScript技术文章标签： javascript java web 换肤 html

本文链接：https://blog.csdn.net/java_wht/article/details/72904198

版权

javaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.all{
				width: 700px;
				height: 300px;
				background-color: palevioletred;				
				padding-top: 40px;
			}
			.kind{
				width: 600px;
				height: 30px;
				background-color: red;
				margin-left: 50px;
			}
			.point{
				width: 10px;
				height:10px;
				background-color: red;
				margin-left: 60px;
				margin-bottom: 20px;
			}
			.point1{
				width: 10px;
				height:10px;
				background-color: forestgreen;
				margin-left: 80px;
				margin-top: -30px;
			}
			.point2{
				width: 10px;
				height:10px;
				background-color: deepskyblue;
				margin-left: 100px;
				margin-top: -10px;
				margin-bottom: 20px;
			}
			
		</style>
		<meta charset="UTF-8">
		<script>

			
			function changGreen(){
				var div=document.getElementById("color");
				div.style.backgroundColor="forestgreen";
			}
			function changBlue(){
				var div=document.getElementById("color");
				div.style.backgroundColor="deepskyblue";
			}
			function changRed(){
				var div=document.getElementById("color");
				div.style.backgroundColor="red";
			}
		</script>
		<title></title>
	</head>
	<body>
			<div class="all">
				
				<div id="red" class="point" οnclick="changRed()">
				</div>
				
				<div  id="green" class="point1" οnclick="changGreen()">
				</div>
				
				<div  id="blue" class="point2" οnclick="changBlue()">
				</div>
				
				<div id="color" class="kind">
					<table width="110%" >
						<tr>
							<td >首页</td>
							<td>网页</td>
							<td>新闻</td>
							<td>音乐</td>
							<td>图片</td>
							<td>地图</td>
							<td>文库</td>
						</tr>
					</table>
				</div>
			
			</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.all{
				width: 700px;
				height: 300px;
				background-color: palevioletred;				
				padding-top: 40px;
			}
			.kind{
				width: 600px;
				height: 30px;
				background-color: red;
				margin-left: 50px;
			}
			.kind ul{
				list-style-type:none ;
			}
			.kind ul li{
				float: left;
			}
			.kind li a{
				display: block;
				text-decoration: none;
				margin-left: 30px;
				margin-top: 6px ;
			}
			.kind li a:link,.kind li a:visited{
				background-color: #DCDCDC;
			}
			.kind li a:hover{
				background-color: #DB7093;
			}
			.point{
				width: 10px;
				height:10px;
				background-color: red;
				margin-left: 60px;
				margin-bottom: 20px;
			}
			.point1{
				width: 10px;
				height:10px;
				background-color: forestgreen;
				margin-left: 80px;
				margin-top: -30px;
			}
			.point2{
				width: 10px;
				height:10px;
				background-color: deepskyblue;
				margin-left: 100px;
				margin-top: -10px;
				margin-bottom: 20px;
			}
		</style>
		<meta charset="UTF-8">
		<script>
			
			
			function changGreen(){
				
				var div=document.getElementById("color");
				div.style.backgroundColor="forestgreen";
				
			}
			function changBlue(){
				var div=document.getElementById("color");
				div.style.backgroundColor="deepskyblue";
			}
			function changRed(){
				var div=document.getElementById("color");
				div.style.backgroundColor="red";
			}
			
		</script>
		<title></title>
	</head>
	<body>
			<div class="all">
				
				<div id="red" class="point" οnclick="changRed()">
				</div>
				
				<div  id="green" class="point1" οnclick="changGreen()">
				</div>
				
				<div  id="blue" class="point2" οnclick="changBlue()">
				</div>
				
				<div id="color" class="kind">
					<table width="110%" >
						<ul>
							<li><a href="">首页</a></li>
							<li><a href="">网页</a></li>
							<li><a href="">新闻</a></li>
							<li><a href="">音乐</a></li>
							<li><a href="">图片</a></li>
							<li><a href="">地图</a></li>
							<li><a href="">文库</a></li>
						</ul>
					</table>
				</div>
			
			</div>
	</body>
</html>