夜间模式的开启与关闭，父模板的制作

Posted 2020-10-13 李明惠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。、

html：
<!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("on")){
                oOnoff.src="../static/img/off.jpg";
                oBody.style.background="#303030 ";
                oBody.style.color="white";
            }else {
                oOnoff.src="../static/img/on.jpg";
                oBody.style.background="white";
                oBody.style.color="gray";
            }
        }
    </script>
</head>
<body id="myBody">

<img id="myOnOff" onclick="mySwitch()" src="../static/img/on.jpg" width="40px">
<script>
    document.write(Date())
</script>
</body>
</html>

父模板的制作
1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
2. 汇总相关的样式形成独立的css文件。
3. 汇总相关的js代码形成独立的js文件。
4. 形成完整的base.html+css+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baseTest</title>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
</head>
<base href="http://www.xiami.com/">

<div class="navbar">
    <nav class="navbar-top">
        <li type="submit" class="active"><a href="" target="_blank">首页</a></li>
        <li type="submit"><a href="#">歌单</a></li>
        <li type="submit"><a href="#">电台</a></li>
        <li type="submit"><a href="#">音乐人</a></li>
        <input type="text" id="select" placeholder="音乐搜索，找人">
        <li type="submit" id="submit"><a href="#">搜索</a></li>

        <li style="float:right" type="submit"><a href="login.html" target="_blank">登录</a></li>
        <li style="float:right" type="submit"><a href="register.html" target="_blank">注册</a></li>


    </nav>
</div>
<div class="navbar-down">
  <a href="#">Test1</a>
  <a href="#">Teat2</a>
  <a href="#">Test3</a>
  <a style="float: right " href="#">Test4</a>


</div>
<body>


</body>
</html>

HTML

.navbar-top{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: gray;
    }
li{
    float: left;
    border-right:1px solid #bbb;
}
li:last-child {
    border-right: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #0099CC;
}
#select{
    margin-top: 10px;
    width: 200px;
    height: 23px;
    font-size: 15px;
}
.navbar-down{
    overflow: hidden;
    background-color: gray;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.navbar-down a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 14px;
    text-decoration: none;
    font-size: 15px;
}

CSS

以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章

夜间模式的开启与关闭，父模板的制作