夜间模式的开启与关闭,父模板的制作
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了夜间模式的开启与关闭,父模板的制作相关的知识,希望对你有一定的参考价值。
1、夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜间模式</title> <script> function mySwitch() { var oBody = document.getElementById("myBody"); var oOnOff= document.getElementById("myOnOff"); if (oOnOff.src.match("bulbon")){ oOnOff.src="http://www.runoob.com/images/pic_bulboff.gif"; oBody.style.background="black"; oBody.style.color="white"; }else { oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="black"; } } </script> </head> <body id="myBody" style="color: black;background: white;"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="60px"> <script> document.write(Date()) </script> </body> </html>
2.父模板的制作
- 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function mySwitch() { var oBody= document.getElementById("myBody"); var oOnoff=document.getElementById("myOnOff"); if(oOnoff.src.match("bulbon")){ oOnoff.src="http://www.runoob.com/images/pic_bulboff.gif"; oBody.style.background="black"; oBody.style.color="yellow"; }else{oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="black"; } } </script> <link rel="stylesheet" type="text/css" href="../static/css/switch.css"> </head> <body id="myBody"> <nav> <img src="http://www.gzcc.cn/2016/images/banner.png"> <script> document.write(Date()) </script> <br> <a href="http://www.gzcc.cn/">首页</a> <a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">概况</a> <a href="http://zsb.gzcc.cn/html/xinshengzhinan/">服务</a> <a href="http://career.gzcc.cn/">就业</a> <input type="text" placeholder="请输入查询地区"> <button type="submit">搜索</button> <p align="right"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"></p> </nav> <div class="recommond"> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://image.xinmin.cn/2011/12/31/20111231060817376987.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://edu.kunming.cn/index/content/attachement/jpg/site323/20100201/00016c41a8060cd0ddea1f.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn">画说校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://pic1.bbzhi.com/dongmanbizhi/mengxiangyufeixiangdeshijiegongqijunhejibolijingdiandonghuazuopinkuanpingbizhi/cg_ghibli_hayao_miyazaki_31775_9.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn"><img src="http://p4.so.qhimgs1.com/t0130ade2d81f8c3244.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn">领导关怀</a></div> </div> </div> </body> </html>
img { width: 180px; } div.img{ border:1px solid #cccccc; float: left; margin: 5px; width:180px; height: 200px; } div.img img{ width:100%; height:100%; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border:1px solid #000000; }
以上是关于夜间模式的开启与关闭,父模板的制作的主要内容,如果未能解决你的问题,请参考以下文章