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

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

时间:2017-11-04 22:24:49      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:==   制作网站   black   alt   base   height   ext   run   ntb   

夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. onclick函数调用。
<!DOCTYPE html>
<html lang="en">
<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>

技术分享  技术分享

父模板的制作

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

py

from flask import Flask, render_template

app = Flask(__name__)

@app.route(‘/‘)
def fu():
    return render_template(‘fu.html‘)

@app.route(‘/test/‘)
def test():
    return ‘test‘

@app.route(‘/login/‘)
def login():
    return render_template(‘login.html‘)

@app.route(‘/regist/‘)
def regist():
    return render_template(‘regist.html‘)

if __name__ == ‘__main__‘:
    app.run(debug=True)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
  <link href="../static/fu.css" rel="stylesheet" type="text/css">

    <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">
<input type="text" name="search">
<button type="submit">搜索</button>

<a href="http://127.0.0.1:5000/">首页</a>
<a href="http://127.0.0.1:5000/login">登录</a>
<a href="http://127.0.0.1:5000/regist">注册</a>


<h1>首页</h1>

<hr>
<a id="a">常见问题 / </a><a class="textblue">联系我们 / </a><a>用户意见 / </a><a>@create by haili</a>
</body>

</html>

 

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

标签:==   制作网站   black   alt   base   height   ext   run   ntb   

原文地址:http://www.cnblogs.com/0058kyle/p/7784743.html

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