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

Posted 2020-10-15 陆倩霞

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>
    <script src="../static/js/base.js" type="text/javascript"></script>
    <link href="../static/css/base.css" rel="stylesheet" type="text/css">


</head>
<body id="myBody">
<nav>
<div class="container">
    <img id="images" src="http://pic22.nipic.com/20120629/2786001_174649062000_2.jpg">
    <a class="one" href="">首页</a>
    <a class="one" href="">发布问题</a>
    <a class="one" href="">下载客户端</a>
    <input id="keyword" type="text" name="search" placeholder="请输入关键字">
    <input type="submit" value="搜索">
    <a class="login" href="{{url_for(\'login\')}}">登录</a>
    <a class="register" href="{{url_for(\'register\')}}">注册</a>
    <img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif">
</div>
</nav>
 <div class="img">
        <a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031679&di=ff1b37b2f4b046bb6b035f800fcc1400&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100923%2F4845745_011226734994_2.jpg"></a>
        <div class="desc"><a href="http://music.baidu.com/tag/%E6%B5%81%E8%A1%8C">流行歌曲</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/#/playlist?id=105393276">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031677&di=1179157de7164fa75c56875751209545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F50%2F48%2F20P58PICesf.jpg"></a>
        <div class="desc"><a href="http://music.163.com/#/playlist?id=105393276">零零年代曲</a></div>
    </div>
    <div class="img">
        <a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=623a8822585eb7e98099f5b646b2243c&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F13%2F36%2F87A58PICdZ6_1024.jpg"></a>
        <div class="desc"><a href="http://music.baidu.com/tag/%E6%AC%A7%E7%BE%8E">欧美Hits</a></div>
    </div>
     <div class="img">
        <a href="http://music.163.com/#/playlist?id=23043140">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478031678&di=0f421a2aaf8a7d441fd6eebfb9019105&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv1%2F93%2Fd%2F87.jpg"></a>
        <div class="desc"><a href="http://music.163.com/#/playlist?id=23043140">九十年代四大天王</a></div>
    </div>
</div>
<footer>
    <div class="footer_box">
         Copyright@ 2017-2022 个人版权，版权所有
     </div>
 </footer>
</body>
</html>

.container{
    margin-right: -15px;
    margin-left: -15px;
    display: block;
    font-size:20px;
    border-bottom: 1.5px solid lavender;


}
#images{
    width: 60px;
    height: 40px;
}
.login{
    position:absolute;
    right:180px;
    top:20px;
}
.register{
    position:absolute;
    right:100px;
    top:20px;
}
a{

    text-decoration: none;
}
a.one:hover{
    padding-bottom:5px;
    background-color: cadetblue;
    text-decoration:none;
}
a.login:hover{
    padding-bottom:5px;
    border-bottom:3px solid  #FF0000;
    color: red;
    text-decoration:none;
}
a.register:hover{
    padding-bottom:5px;
    border-bottom:3px solid  #FF0000;
    color: red;
    text-decoration:none;
}
#keyword{
    height: 25px;
    border-radius:5px;
}
#on_off{
    height: 35px;
     width:20px;
     position:absolute;
     right:50px;
     top:10px;
}
footer{
     position:absolute;
     bottom:0;
     width:100%;
 }

footer .footer_box{
     background-color:burlywood;
    padding: 10px;
    color : black;
    text-align: center;
 }
img{
    width: 300px;
    height: 200px;
}
div.img{
    border: 1px solid #cccccc;
    width: 180px;
    height: 160px;
    float: left;
    margin: 5px;
}
div.img img{
    width: 100%;
    height:80%;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border: 1px solid #777777;
}
div.clearfloat{
    clear: both;
}
.pic{
    position:absolute;

    bottom: 30px;
}

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

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

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