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

时间：2017-11-04 15:01:55 阅读：226 评论：0 收藏：0 [点我收藏+]

标签：制作网页 meta 完整 bdr www. bottom ott base

夜间模式的开启与关闭

放置点击的按钮或图片。
定义开关切换函数。

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("demo").style.color="white"
            }
            else {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif"
                document.getElementById("myBody").style.background="white"
                document.getElementById("demo").style.color="black"

            }
        }
    </script>
</head>
<body id="myBody">
<p id="demo"> 你好呀
<img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50px" >
<script>
    document.write(Date())
    document.getElementById("demo").innerHTML=data();
</script></p>
<button type="button" onclick=window.alert("i")>date</button>
</body>

</html>

技术分享

父模板的制作

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

形成完整的base.html+css+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base target="_blank">
    <title>杂七杂八网</title>
     <link rel="stylesheet" type="text/css" href="../static/css/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("demo").style.color="white"
            }
            else {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif"
                document.getElementById("myBody").style.background="white"
                document.getElementById("demo").style.color="black"
            }
        }
    </script>
</head>

<body id="myBody" >
<nav class="aaa">
    <img src="http://p3.so.qhimgs1.com/bdr/_240_/t01b3b860d0555c8393.png"style="height: 40px;width: 45px; ">
    <a href="http://www.iqiyi.com/">官网首页</a>
    <a href="http://www.aiqiyibofangqi.com/">一键下载APP</a>
    <a href="{{ url_for("denglu") }}">用户登录</a>
    <a href="{{ url_for("zhuce") }}">注册</a>
    <input type="text"placeholder="请输入搜索内容">
    <input type="button"value="搜索">
    <img id="on_off" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" style="height: 40px;width: 35px; " >
</nav>
<div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">品牌与徽标</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>

</body>
</html>

 #bottom{
     position:fixed;
            bottom:50px;
            left:600px;
}
        #bottom a{
            font-size: 12px;
            color: #828078;
            text-decoration: none;
        }

技术分享

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

标签：制作网页 meta 完整 bdr www. bottom ott base

原文地址：http://www.cnblogs.com/1996liuda/p/7777368.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行