夜间模式的开启与关闭,父模板的制作
- 夜
- 间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
- 父模板的制作
- 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>On&Off</title> <script> function mySwitch(){ var oBody = document.getElementById("myBody"); var oOnOff = document.getElementById("myOnOff"); if(oOnOff.src.match("on")){ oOnOff.src="../static/img/off.jpg"; oBody.style.background="black "; oBody.style.color="white"; }else { oOnOff.src="../static/img/on.jpg"; oBody.style.background="white"; oBody.style.color="gray"; } } </script> </head> <body id="myBody"> <nav> <a class="logo" href="/"> <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1185915212.png" alt="Logo"></a> <a href="">我爱淘宝</a> <a href="">春夏款</a> <a href="">秋冬款</a> <a href="">男款</a> <a href="">女款</a> <a href="">童装</a> <input type="text"name="search"> <button type="submit">搜索</button> <img id="myOnOff" onclick="mySwitch()" src="img/on.jpg" width="45px"> </nav> <p></p> </body> </html>