夜間模式的開啟與關閉，父模板的制作
阿新 • • 發佈：2017-11-02
制作網站 定義 css 問題 hit img date 註冊 uname
- 夜間模式的開啟與關閉
- 放置點擊的按鈕或圖片。
- 定義開關切換函數。
- onclick函數調用。
- 父模板的制作
- 制作網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說明等。
- 匯總相關的樣式形成獨立的css文件。
- 匯總相關的js代碼形成獨立的js文件。
- 形成完整的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://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"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px";> <script> document.write(Date()) </script> </body><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>歡迎來到登錄界面，請登錄</title> <script type="text/javascript" src="../js/sdda.js"></script> <link rel="stylesheet" href="../css/denglu.css"> </head> <body> <p id="meto">中國標準時間</p> <script>document.getElementById("meto").innerHTML = Date()</script> <div id="container" align="center"> <div id="header"><h2 align="center">登陸界面</h2></div> <div id="content" > <p align="center">用戶名：<input id="uname" type="text" placeholder="請輸入賬號"> </p> <p align="center"> 密碼 ：<input id="upass" type="password" name="psw" placeholder="請輸入密碼"></p> <br> <div id="error_box"><br> </div> <input type="radio" value="stu">用戶 <input type="radio" value="tea">會員 <br> <input type="checkbox" value="true">記住密碼 <a href="">登陸遇到問題</a><br> <button onclick="fnLogin()">登陸</button>     <button ><a href="zhece.html">註冊</a> </button> </div> <div id="footer"><h3 align="center">版權@hir</h3></div> </div> </body> </html>
夜間模式的開啟與關閉，父模板的制作