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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了夜间模式的开启与关闭,父模板的制作相关的知识,希望对你有一定的参考价值。

1、夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. onclick函数调用。
    技术分享
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>夜间模式</title>
        <script>
            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";
                }
            }
        </script>
    </head>
    <body id="myBody" style="color: black;background: white;">
    <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="60px">
    <script>
        document.write(Date())
    </script>
    </body>
    </html>
    技术分享

技术分享技术分享

2.父模板的制作

  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>
    <script>
        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="yellow";
            }else{oOnoff.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }

    </script>
   <link rel="stylesheet" type="text/css" href="../static/css/switch.css">

</head>

<body id="myBody">
<nav>

<img src="http://www.gzcc.cn/2016/images/banner.png">
    <script>
    document.write(Date())
</script>
<br>
    <a href="http://www.gzcc.cn/">首页</a>
    <a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">概况</a>
    <a href="http://zsb.gzcc.cn/html/xinshengzhinan/">服务</a>
    <a href="http://career.gzcc.cn/">就业</a>

   <input type="text" placeholder="请输入查询地区">
    <button type="submit">搜索</button>

    <p align="right"> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"></p>
</nav>




<div class="recommond">
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://image.xinmin.cn/2011/12/31/20111231060817376987.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img
                src="http://edu.kunming.cn/index/content/attachement/jpg/site323/20100201/00016c41a8060cd0ddea1f.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">画说校园</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img
                src="http://pic1.bbzhi.com/dongmanbizhi/mengxiangyufeixiangdeshijiegongqijunhejibolijingdiandonghuazuopinkuanpingbizhi/cg_ghibli_hayao_miyazaki_31775_9.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://p4.so.qhimgs1.com/t0130ade2d81f8c3244.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">领导关怀</a></div>
    </div>

</div>
</body>
</html>
技术分享

 

 

技术分享
img {
    width: 180px;
}
div.img{
border:1px solid #cccccc;
     float: left;
      margin: 5px;
      width:180px;
    height: 200px;
  }
 div.img img{
     width:100%;
     height:100%;
 }
 div.desc{
     text-align: center;
     padding: 5px;
 }
 div.img:hover{
      border:1px solid #000000;
 }

 

以上是关于夜间模式的开启与关闭,父模板的制作的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

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