- 夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- 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 id="mybody"><div style="float: left"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="24" height="24" style="40px" > </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 id="search" type="text" name="search" placeholder="请输入关键词：">
<button id="play" type="submit">查找</button> </td>
<td><a class="login" href="{{ url_for('usercenter') }}">个人中心</a></td>
<td><a class="login" href="{{ url_for('logout') }}">登录</a></td>
<td><a class="login" href="{{ url_for('login') }}">登录</a></td>
<td><a class="register" href="{{ url_for('register') }}"> 注册</a></td>
<img id="myOn_Off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="24" height="24">
</tr>
</nav>
<footer>
<div class="footer_box">
关于我们|安全保障|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"; } }
