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

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

父模板的制作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>夜晚模式</title>

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


</head>
<body >

 <div style="float: left">
            <img  >
        </div>



<script>
    document.write(Date())
</script>">


</body>
</html>

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

base.html


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
  <!--<title>父模板</title>

    <!--<script src="../static/js/base.js" type="text/javascript"></script>-->
     <script src="{{ url_for('static',filename='js/base.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="../static/css/base.css">


</head>
<body>
<nav class="box">
<tr>

    <td><a href="{{ url_for('base') }}">首页</a> </td>
     <td><a href="{{ url_for('question') }}">发布问答</a> </td>
     <td><input  >
           关于我们|安全保障|360招聘|联盟品牌认证|猎王平台|Copyright@360.cn.All rights Raserved

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

base.css


body{
    background:url("http://image.club.china.com/twhb/2016/2/7/1011/1454845020842.gif") no-repeat;


    background-size:100%;
}
.box{
   font-family: inherit;
    font-size: 18pt;
    font-weight: 200;
    font-color:black;


}
.box{
    word-spacing: 1em;

}
.login{
    text-align: right;

}
.wrink {
    font-size: 30px;
    display: block;
    margin-left: 20px;
    margin-right: 20px;
}
footer {
    position: absolute;
    bottom: 3px;
     100%;
}
footer .footer_box {
     1500px;
    height: 1cm;

    padding: 1px;
    color: black;
    text-align: center;
}

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

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

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

相关推荐