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

Posted 2020-10-15 0104鲍珊珊

tags:

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

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

父模板的制作

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

形成完整的base.html+css+js html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漫画</title>
    <link rel="stylesheet" type="text/css" href="../static/css/manhua.css" type="text/css">
     <script src="../static/js/manhua.js"></script>
    <manhua target="_blank"/>
</head>
<body id="myBody">

<nav>
    <img src="http://news.u17i.com/images/header_bg/header_bg_1508753122_9zUfjgQKJw7A.jpg"><br>
    <a href="http://127.0.0.1:5000">首页</a>
    <a href="">下载</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="http://127.0.0.1:5000/login">登录</a>
    <a href="http://127.0.0.1:5000/register">注册</a>

  <img id="on_off" onclick="mySwitch()" src="../static/images/on.jpg" width="80px">
    </nav>



<div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin" >
            <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=bd7d3d834734970a537e187df4a3baad/50da81cb39dbb6fd47c8108a0f24ab18962b378e.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin">天空之城</a></div>
    </div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=0000a3f3583d26973ade000f3492d99e/242dd42a2834349ba3d7f0bcc0ea15ce36d3be32.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">你的名字</a></div>
    </div>
    <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">
            <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=e1f375ca56da81cb5aeb8b9f330fbb73/aec379310a55b319a7591f4b44a98226cffc176f.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">哆啦A梦</a></div>
    </div>
</div>
<div class="clearfloat">
    <img src="http://p0.so.qhimgs1.com/t01b0bcf7da772c3e8c.jpg" width="500" height="500">

</div>
</body>
</html>

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

css

    div.katong{
        border:2px solid #999999;/*设置盒子的边框线条*/
        width: 300px;
        float:left;/*设置浮动对象，往左边靠拢*/
        margin:5px;/*设置边框之间的距离*/
    }
    div.katong.img{
        width: 100%;
        height: auto;
    }


    div.desc{
        font-size: 150%;
        text-align: center;/*设置文字居中*/
        padding:5px; /*设置文字距离边框的宽度*/
    }

    /*设置鼠标移动到边框的反应*/
    .img:hover{
        border:2px solid #ffff33;
    }
    div.clearfloat{
        clear: left;
    }

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

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