码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-04 11:30:27      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:get   搜索   包括   制作   logs   ntb   back   white   函数调用   

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



<!
DOCTYPE html> <html lang="en" xmlns:color="http://www.w3.rog/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 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" } } </script> </head> <body id="myBody"> <img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50px"> <script> document.write(Date()) </script> </body> </html>

 技术分享

技术分享

 

父模板的制作

  1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
  2. 汇总相关的样式形成独立的css文件。
  3. 汇总相关的js代码形成独立的js文件。
  4. 形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body>
<nav>
    <img src="https://p1.pstatp.com/origin/39a00003fc004e34ec7d" width="50" height="50" >
    <input type="text">
    <button type="submit">搜索</button>
    <a href="{{ url_for(‘base‘) }}">首页</a>
    <a href="http://127.0.0.1:5000/ll">登录</a>
    <a href="{{ url_for(‘zc‘) }}">注册</a>


</nav>
</body>
</html>

 技术分享

 

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

标签:get   搜索   包括   制作   logs   ntb   back   white   函数调用   

原文地址:http://www.cnblogs.com/0020l/p/7777349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!