夜间模式的开启与关闭,父模板的制作
1.夜间模式的开启与关闭
a.放置点击的按钮或图片。
b.定义开关切换函数。
c.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://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png"; oBody.style.background="black"; oBody.style.color="blue"; }else{ oOnOff.src="http://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png"; oBody.style.background="black"; oBody.style.color="red"; } } </script> </head> <body id="myBody">
2.父模板的制作
a.制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
b.汇总相关的样式形成独立的css文件。
c.汇总相关的js代码形成独立的js文件。
d.形成完整的base.html+css+js
<!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://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png"; oBody.style.background="black"; oBody.style.color="blue"; }else{ oOnOff.src="http://pic.58pic.com/58pic/15/59/25/04E58PICcfu_1024.png"; oBody.style.background="black"; oBody.style.color="red"; } } </script> <link rel="stylesheet" type="text/css" href="../static/css/beryl.css"/>. <script src="../static/js/beryl.js"></script> </head> <body> <input type="text"> <button>搜索</button> <div class="recommend"> <div class="img"> <a href="http://www.4399.com"><img src="http://imga1.5054399.com/upload_pic/2017/9/7/4399_15263776429.jpg"></a> <div class="img"><a href="http://www.4399.com">弹弹堂3</a></div> </div> <div class="desc"> <a href="http://www.4399.com"><img src="http://imga4.5054399.com/upload_pic/2017/7/24/4399_13510268354.jpg"></a> <div class="desc"><a href="http://www.4399.com">楚乔传</a> </div> </div> <div class="img"> <a href="http://www.4399.com"><img src="http://imga2.5054399.com/upload_pic/2017/8/5/4399_13445867323.jpg"></a> <div class="img"><a href="http://www.4399.com">枪战英雄</a></div> </div> <div class="img"> <a href="http://www.4399.com"><img src="http://imga5.5054399.com/upload_pic/2017/2/14/4399_15450688970.jpg"></a> <div class="img"><a href="http://www.4399.com">盗墓笔记</a></div> </div> </div> <div class="clearfloat"> <img src="http://imga2.5054399.com/upload_pic/2015/9/1/4399_17562395347.gif"> </div> </body> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script> document.write(Date()) </script> </html>
css
img { width: 300px; } div .img { border: 1px solid #ccc; width: 150px; float: left; margin: 5px; } div.img img { width: 100%; height: auto; } div.desc { text-align: center; padding: 5px; } div.clearfloat { clear: both; }