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

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

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("it/u=931547280,828274034&fm=27&gp=0")){
                myele.src="http://img2.imgtn.bdimg.com/it/u=931547280,828274034&fm=27&gp=0.jpg"
                document.getElementById("myBody").style.background="black"
                document.getElementById("myBody").style.color="white"
            }
            else{
               myele.src="http://img3.imgtn.bdimg.com/it/u=806154756,4276092763&fm=27&gp=0.jpg"
                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://img2.imgtn.bdimg.com/it/u=931547280,828274034&fm=27&gp=0.jpg" width="50px">
<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>

    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
    <script src ="../static/js/base.js"></script>
    <style type="text/css">

    </style>

</head>
<body id="myBody">

<nav>
    <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　height="20" width="20px">
    <a href="https://www.baidu.com/">首页</a>
    <input type="text" name="search">
    <button type="submit">搜索</button>
    <a href="http://localhost:63342/my1/templates/login.html?_ijt=258mlfkqv5j4ogr05tb7rdj75i">登录</a>
    <a href="http://localhost:63342/my1/templates/zhuce.html?_ijt=vfohs6o03buojpcgd8i9m4991j">注册</a>
</nav>

<div>
    <p><span style="font-size: 40px;color: blue;font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace";>浩瀚星空</p>
</div>

 <div>
        <div class="img">
            <a href="https://www.baidu.com/">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558937&di=e9f6b3da7e4525b5048761d321e7a334&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D9d0e654a05b30f242197e440a0fcbb36%2F43a7d933c895d1434bcc2a0879f082025aaf0767.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">地球</a></div>
            </div>

         <div class="img">
            <a href="https://www.baidu.com/">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558936&di=f4549e6b6f694583b5e01832ae57ff79&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7e5fc0351bdfa9ece9235e540ab99d76%2F8b13632762d0f7031d0337f502fa513d2697c562.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">星云</a></div>
            </div>

    <div class="img">
            <a href="https://www.baidu.com/">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=01d805549265c8b439c92ed817f2664d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D1fd11f0e9716fdfacc61ceaddce6e621%2Fae51f3deb48f8c542cd0210a30292df5e0fe7f90.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">璀璨星空</a></div>
            </div>

       <div class="img">
            <a href="https://www.baidu.com/">
             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509806558935&di=b77b1b7fb70e8474b8a317fd70ea71ce&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D2820c0958dd6277ffd1f3a7b40517545%2F9f2f070828381f304605d987a3014c086e06f084.jpg"></a>
            <div class="desc"><a href="https://www.baidu.com/">星轨</a></div>
            </div>
    </div>
     <br>

    <div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 © duym</div>
    </div>
    <br>
<P>友情链接</P>
  <a href="http://www.gzcc.cn/">广州商学院<br>
      <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/></a>>
    <p class="text1">版权所有：广州商学院<br>
    地址：广州市黄埔区九龙大道206号
    </p>

</body>
</html>>

img{
        width: 20px;
     }
    div.img{
        border: 1px solid #cccccc;
        width: 180px;
        float:left;
        margin:5px;
    }
    div.img img{
        width: 100%;
        height: auto;
    }
    div.desc{
        text-align: center;
        padding: 5px;
    }
    div.img:hover{
        border: 1px solid #777777;
    }
    .clearfloat{
        clear: both;
    }

function mySwitch(){
            var oBody=document.getElementById("myBody");
            var oOnoff=document.getElementById("myOnOff");
            if(oOnoff.src.match("bulbon")){
                oOnoff.src="https://www.runoob.com/images/pic_bulboff.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }else{
                oOnoff.src="https://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }

posted @ 2017-11-04 20:20 062许立帅阅读(226) 评论(0) 收藏举报

刷新页面返回顶部

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

公告