夜间模式的开启与关闭,父模板的制作
<!DOCTYPE html> <html lang="en" xmlns:color="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function mySwitch() { var myele= document.getElementById("on_off") if(myele.src.match("bulbon")) { myele.src="http://www.runoob.com/images/pic_bulboff.gif" document.getElementById("myBody").style.background="black" document.getElementById("myBody").style.color="white" } else { myele.src="http://www.runoob.com/images/pic_bulbon.gif" document.getElementById("myBody").style.background="white" document.getElementById("myBody").style.color="black" } } </script> </head> <body id="myBody"> <img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulboff.gif" width="50px"> <script> document.write(Date()) </script> </body> </html>
父模版的制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base</title> <link rel="stylesheet" href="../static/css/base.css" type="text/css"> <script src="../static/JS/base.js"></script> </head> <body id="myBody"> <nav> <div class="layui-col-md4"> <div class="layui-row" style="padding-top:10px;"> <img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px" style="padding-left: 10px;"> <a href="http://localhost:63342/denglu1.1/templates/shouye.html?_ijt=qijfc55i74avkg8umf7nn7oqt7">首页</a> <a href="http://localhost:63342/denglu1.1/templates/denglu1.1.html?_ijt=7qkhljvviqhhrvp78f6nv1jtqn">Login</a> <a href="http://localhost:63342/denglu1.1/templates/%E6%B3%A8%E5%86%8C.html?_ijt=bpr6ikepnp2sh7actb82n1m3dt">Enroll</a> </div> </div> <br> <form method="get" action="#"> <div class="layui-row"> <div class="layui-col-md3" style="padding-left: 50px;"> <input type="text" name="title" required lay-verify="required" placeholder="search" autocomplete="off" class="layui-input"> </div> <div class="layui-col-md3" style="padding-left: 50px;"> <button type="submit" class="layui-btn layui-btn-primary">搜索</button> </div> </div> </form> </div></nav> <div class="area"> </div> <div class="area1"> <div class="img"> <a href="https://baike.so.com/doc/5456803-24643565.html"><img src="http://img5.iqilu.com/c/u/2017/0222/1487776284427.jpg"></a> <div class="desc"><a href="https://baike.so.com/doc/1750829-1851093.html?from=120785&sid=1851093&redirect=search">panda</a> </div> </div> <div class="img"> <a href="https://baike.so.com/doc/2269087-2400571.html"><img src="http://pic1.win4000.com/wallpaper/9/533e618008c98.jpg"></a> <div class="desc"><a href="https://www.duitang.com/blog/?id=156020766">熊猫壁纸</a></div> </div> </div> <br> <br> <footer> <div class="footer_box"> Copyright@ 2017-2022 个人版权 </div> </footer> </body> </html>
js
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";
}
}
css
.img {
border: 1px solid #cccccc;
width: 250px;
margin: 5px;
float: left;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
text-align: center;
padding: 5px;
}
div.img:hover {
border: 1px solid #000000;
}
.area {
height: 300px;
}
.area1 {
height: 300px;
}
.area2 {
height: 300px;
nav{
position:fixed;
top:0px;
height: 58px;
background-color:#FCFCFC;
border-bottom:1px solid #DDDDDD;
width:100%;
}
footer.footer_box{
background-color: #002D54;
padding: 10px;
color : #FFFFFF;
text-align: center;
}