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

来源：互联网发布：t22被砍后数据编辑：程序博客网时间：2024/06/03 17:25

<!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" onclick="changRed()"></div><div  id="green" class="point1" onclick="changGreen()"></div><div  id="blue" class="point2" onclick="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" onclick="changRed()"></div><div  id="green" class="point1" onclick="changGreen()"></div><div  id="blue" class="point2" onclick="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>

阅读全文

1 0

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

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