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

Posted 2020-10-13 猪精雅0

tags:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../static/base.css" rel="stylesheet" type="text/css">
    <script src="../static/base.js"></script>
</head>
<body class="bodycolor" id="myBody">
<div class="daohanglang" id="daohanglang">
    <nav>
                <img class="turn_on_off" id="on_off" onclick="mySwitch()" src="../static/image/on.jpg" width="40px">
                <a class="daohang"  href="">首页</a>
                <a class="daohang"  href="">卢浮宫</a>
                <a class="daohang"  href="">塞纳河</a>
                <a class="daohang"  href="">埃菲尔铁塔</a>
                <a class="daohang"  href="">香榭丽大道</a>
                <a class="daohang"  href="">巴黎圣母院</a>
                <input class="sousuo" id="sousuo" type="text" placeholder="搜索" >
                <img onclick="chaZhao()" id="chazhao" src="../static/image/on.jpg" width="20px">
                <a class="daohangright" href="" >登录</a>

    </nav>

<HR align=center width=100% color=#c0c0c0 SIZE=1>
</div>
<div class="foot-menu" id="dibudaohang">
    <HR align=center width=100% color=#c0c0c0 SIZE=1>
    <nav>
    <a class="daohang"  href="">法国历史</a>
    <a class="daohang"  href="">法国地图</a>
    <a class="daohang"  href="">旅行攻略</a>
    </nav>
    <p>版权@ linxx</p>
</div>

css

.daohang{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color: #ff6633;
    font-family: "华文行楷";
    margin-top:30px;
}
.daohangright{
    margin-top:60px;
    color: #ff6633;
    text-decoration:none;
    font-weight:bold;
    float:right;
    font-family: "华文行楷";
    font-size: xx-large;
        }

.turn_on_off{
    margin-top:30px;
    margin-right:20px;

}
.shousuo{
    width: 15%;
    hight:12%;
}
.bodycolor{
    background-color: white;
}
.daohanglang{
    background-color: white;
}
.foot-menu{
    width:100%;
    height:60px;
    background-color:white;
    position:fixed;
    bottom:0;/**距离底部为0*/left:0;z-index:1;
}

function mySwitch() {
            var myele = document.getElementById("on_off")
            if (myele.src.match("on")) {
                myele.src = "../static/image/off.jpg"
                document.getElementById("myBody").style.background = "#333333"
                document.getElementById("daohanglang").style.background="#333333"
                document.getElementById("demo").style.color = "white"
            }
            else {
                myele.src = "../static/image/on.jpg"
                document.getElementById("myBody").style.background = "white"
                document.getElementById("daohanglang").style.background="white"
                document.getElementById("demo").style.color = "black"
            }
        }

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

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