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

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

父模板的制作

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/vv.css" rel="stylesheet" type="text/css">
    <script src="../static/change.js"></script>

    <nav class="nav">
    <a href="{{ url_for("vi")}}">首页</a>
    <a href="">下载</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="{{ url_for("login")}}">登录</a>
    <a href="{{ url_for("regiter")}}">注册</a>
    </nav>

</head>
<body id="myBody">
<img id="on_off" onclick="change()" src="../static/images/on.jpg" width="50px">

<div  class="box">
    <a href="" class="nav"><span>关于我们</span></a>
    <a href="" class="nav"><span>意见反馈</span></a>
    <a href="" class="nav"><span>安全保障</span></a>
</div>

</body>
</html>

div{
    margin: 0 auto;
    text-align: center;
    background-color: lightgray;
}
.div1{
    width: 350px;
    height: 250px;
    border-color: lightgray;
    border-style: groove;
    border-width: 2px;
    margin-top:100px ;
}
.div2{
    font-family: 方正清刻本悦宋简体;
    border-bottom-style: groove;
    border-bottom-width: 2px;
    line-height: 30px;
    background-color: gainsboro;
}
.div3{
    font-family: 幼圆;
    width: 350px;
    height: 50px;
    font-size: 18px;
    align:"center";
}
.div4{
    background: url(http://pic.58pic.com/58pic/16/00/08/78658PIChZ3_1024.jpg)
}
.box{
    width:100%;
    height:60px;
    background-color:white;
    position:fixed;
    bottom:0;
    left:0;
    z-index:1;
}

function change(){
    var chan=document.getElementById("on_off");
    if(chan.src.match("on")){
        chan.src="../static/images/off.png";
        document.getElementById("myBody").style.background="gray";
        document.getElementById("myBody").style.color="white"
    }else{
        chan.src="../static/images/on.jpg";
        document.getElementById("myBody").style.background="white";
        document.getElementById("myBody").style.color="gray"
            }
        }

posted @ 2017-11-03 21:34 100彭楚殷阅读(220) 评论(0) 编辑收藏举报

刷新页面返回顶部

100彭楚殷

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

公告