夜间模式的开启与关闭，父模板的制作
Posted 张木清
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网易云音乐</title> <link rel="stylesheet" href="../static/css/base.css" type="text/css"> <script src="../static/js/base.js"></script> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body id="mubody"> <img id="muonoff" onclick="muSwitch()" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0on.jpg" width="80px"> <script> document.write(Date()) </script> <ul class="nav nav-pills"> <li class="active"><a href="#">发现音乐</a></li> <li><a href="#">我的音乐</a></li> <li><a href="#">朋友</a></li> <li><a href="#">商城</a></li> <li><a href="#">音乐人</a></li> <li><a href="#">下载客户端</a></li> <li><a href="#"> <span class="glyphicon glyphicon-user"></span> 注册 </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span>登录 </a> <ul class="dropdown-menu"> <li><a href="#">手机登录</a></li> <li><a href="#">微信登录</a></li> <li><a href="#">QQ登录</a></li> <li><a href="#">新浪微博登录</a></li> <li><a href="#">网易邮箱账号登录</a></li> </ul> </li> </ul> <div class="area"> </div> <div class="coverd"> <div class="img"> <a href="http://music.163.com/"><img src="http://i04.pic.sogou.com/6ea5a644659a2ddc"></a> <div class="desc"><a href="http://music.163.com/">陈奕迅</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="http://i04.pic.sogou.com/adca151a5e669ec8"></a> <div class="desc"><a href="http://music.163.com/">周杰伦</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="http://i01.pic.sogou.com/4cbe902a63b7c16d"></a> <div class="desc"><a href="http://music.163.com/">张学友</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="http://p3.pstatp.com/large/19e9000e09a816a13543"></a> <div class="desc"><a href="http://music.163.com/">华晨宇</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=886930912,1435518593&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">古巨基</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="http://p4.music.126.net/o6DNZ8nWmRScwUYP3ukHdg==/8003345139814445.jpg"></a> <div class="desc"><a href="http://music.163.com/">容祖儿</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4076724071,2219231128&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">孙燕姿</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882180407,2666551305&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">莫文蔚</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2712041981,4202677588&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">陈小春</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=819435915,1277380989&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">五月天</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1972568287,3878107689&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">谢安琪</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2837743540,3774445789&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">张杰</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2230235086,106225297&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">梁静茹</a></div> </div> <div class="img"> <a href="http://music.163.com/"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2863595005,2326737300&fm=27&gp=0.jpg"></a> <div class="desc"><a href="http://music.163.com/">林俊杰</a></div> </div> </div> <div id="footer" style="background-color: red;clear: both;text-align: center"><i>网易公司版权@1997-2017</i></div>>> </body> </html>
base.css
.img {
border: 1px solid #cccccc;
width: 95px;
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;
}
.coverd {
height: 180px;
}
base.js
function muSwitch() { var mbody = document.getElementById("mubody"); var monoff = document.getElementById("muonoff"); if (monoff.src.match("gp=0on")) { monoff.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0off.jpg"; mbody.style.background = "black"; mbody.style.color = "white"; } else { monoff.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0on.jpg"; mbody.style.background = "white"; mbody.style.color = "black"; } }
白天
黑夜
以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章