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

Posted 2020-10-13 欢喜小卢

tags:

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

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

父模板的制作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>
    <h4>护眼模式</h4>
    <script>
        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";
            }
        }
    </script>

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

<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px">
<script>document.write(Date())</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>ＭＩＳ问答平台</title>
    <style type ="text/css">
        p{
            color:red;
        }
        h1{
            background-color:darkgreen;

        }
        .textblue{
            color:blue;
        }
        #tt{
            color:#FFD700;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="taobao.css">

    <base href="http://sinaing.cn/dy/weather/main/index14/007/icons_32_y1/"target="_black">
    <style...></style...>


</head>
<body>
<nav>
    <a href=""><ing scr="w_02_08_00.png">首页</a>
    <a href="http://www.gzcc.cn/">下载APP</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="">登录</a>
    <a href="">注册</a>

</body> </html>

CSS

img{
               width: 300px;
           }
           .img{
               border:1px solid #FF60AF;
               width:180px;
               float:left;
               margin:3px;
           }
           .img img{
               width:100%;
               height:auto;
           }
           .desc{
               text-align:center;
               padding:3px;
           }
           .img:hover{
               border:1px solid#8E8E8E;
           }
           .clearfloat{
               clear:both;
           }

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

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