夜间模式的开启与关闭，父模板的制作
1.夜间模式的开启与关闭
放置点击的按钮或图片。定义开关切换函数。onclick函数调用。
2.父模板的制作
制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。
形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎</title>
<link href="../static/CSS/index.css" rel="stylesheet">
<script src="../static/JS/index.js"></script>
</head>
<body id="myBody">
<header>
<nav>
<ul>
<li><a href="{{ url_for("index") }}" title="首页" target="_blank">首页</a></li>
<input type="text"id="search" name="search">
<button id="button1"type="submit">搜索</button>
<li><a href="{{ url_for("login") }}" title="登录" target="_blank">登录</a></li>
<li><a href="{{ url_for("register") }}" title="注册" target="_blank">注册</a></li>
<li><a href="#" title="退出" target="_blank">退出</a></li>
</ul>
<img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"height="30px" width="40px">
</nav>
</header>
<div class="js">
<a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html">
<img src="http://p2.so.qhimgs1.com/bdr/_240_/t01be8bb2970943347e.jpg"></a>
<div class="aa"><a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html">第一季</a></div>
</div>
<div class="js">
<a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html">
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t01b77032aeaa56c9b0.jpg"></a>
<div class="aa"><a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html">第二季</a></div>
</div>
<div class="js">
<a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html">
<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01caee8f397eef076d.jpg"></a>
<div class="aa"><a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html">第三季</a></div>
</div>
<div class="js">
<a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html">
<img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e74b11e1fa409bad.jpg"></a>
<div class="aa"><a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html">第四季</a></div>
</div>
</body>
<div id="bottom">
Copyright@ 2017 个人版权，版权所有
</div>
</html>
@charset "utf-8";
nav{
float: left;
width:100%;
height:40px;
background-image:url(../image/blue.jpg);
padding: 0 ;
}
nav ul {
float:left;
margin: 0px;
padding: 0 0 0 0;
width: 920px;
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
float: left;
padding: 11px 20px;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #fff;
font-family: Tahoma;
outline: none;
}
nav li a:hover {
color: #2a5f00;
}
#search{
float:right;
margin:5px;
}
#button1{
margin-left: 15px;
float:right;
margin:5px;
}
#bottom{
position:fixed;
bottom:0px;
left:600px;
text-align:center;
}
.js{
width:200px;
float:left;
margin:5px;
}
.js img{
width:100%;
height:100px;
}
.aa{
text-align:center;
padding:5px;
}
.js:hover{
border:1px solid blue;
}
.clearfloat{
clear: both;
function mySwitch(){
var uBody=document.getElementById("myBody");
var Onoff=document.getElementById("myOnOff");
if(Onoff.src.match("bulbon")){
Onoff.src="https://www.runoob.com/images/pic_bulboff.gif";
uBody.style.background="black";
uBody.style.color="white";
}else{
Onoff.src="https://www.runoob.com/images/pic_bulbon.gif";
uBody.style.background="white";
uBody.style.color="black";
}
}
