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

Posted 2020-10-13 097吴嘉玲

tags:

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

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。
父模板的制作
1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
2. 汇总相关的样式形成独立的css文件。
3. 汇总相关的js代码形成独立的js文件。
4. 形成完整的base.html+css+js

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>

    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <script src ="../static/js/base.js"></script>
    <style type="text/css">

    </style>

</head>
<body id="myBody">

<nav>
    <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　height="20" width="20px">
    <a href="http://www.gzcc.cn/">首页</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="http://localhost:63342/my1/templates/login.html?_ijt=258mlfkqv5j4ogr05tb7rdj75i">登录</a>
    <a href="http://localhost:63342/my1/templates/zhuce.html?_ijt=vfohs6o03buojpcgd8i9m4991j">注册</a>
</nav>

<div>
    <p><span style="font-size: 40px;color: blue;font-family: \'Consolas\', \'Deja Vu Sans Mono\', \'Bitstream Vera Sans Mono\', monospace";>欢迎来到广州商学院！</p>
</div>

<div class="area">
</div>

<div class="tu">
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo4.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo3.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo2.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">学校文化</a></div>
        </div>
        <div class="img">
            <a href="http://www.gzcc.cn/">
                <img src="http://static.runoob.com/images/demo/demo1.jpg"></a>
            <div class="desc"><a href="http://www.gzcc.cn">学生风采</a></div>
        </div>
    </div>

    <p class="text1">版权所有：广州商学院<br>
    地址：广州市黄埔区九龙大道206号
    </p>

</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;
}


.tu {
    height: 180px;
}

base.js:

      function mySwitch(){
            var oBody=document.getElementById("myBody");
            var oOnoff=document.getElementById("myOnOff");
            if(oOnoff.src.match("bulbon")){
                oOnoff.src="https://www.runoob.com/images/pic_bulboff.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }else{
                oOnoff.src="https://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }

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

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