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

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

父模板的制作

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

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

<!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="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";
            }
        }
    </script>
</head>
<body id="myBody">
<img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"　width="40px">
<script>
    document.write(Date())
</script>
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片导航</title>
    <link rel="stylesheet" type="text/css" href="../static/css/test1.css">
</head>
<body>

    <div class="header">

        <a href="/">
            <span class="dz">首页</span>
            <base href="http://www.gzcc.cn/"/>
        </a>
        <span class="dz">登录</span>
        <span class="dz">注册</span>
        <input type="text" name="q" id="q" value="" autocomplete="off"
               placeholder="搜索" class="search-input"><br>

    </div>


<div class="daohang">
    <h2>用户导航</h2>
    <hr>
    <div class="img">
        <a href="http://www.gzcc.cn/html/xueyuanrongyu/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a>
        </div>
    </div>


    <div class="img">
        <a href="http://www.gzcc.cn/html/banxuechengguo/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/ldgh/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a>
        </div>
    </div>


    <div class="img">
        <a href="http://i.gzcc.cn" target="_blank">
            <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
        <div class="desc">
            <a href="http://i.gzcc.cn" target="_blank">数字广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">
            <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a>
        </div>
    </div>

    <div class="img">
        <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">
            <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a>
        </div>
    </div>

</div>


<div id="footer">
    版权 © runoob.com
</div>


</div>
</body>
</html>

Css

.header{
    background-color:cadetblue;
    height: 60px;
    line-height: 40px;

}
.search-input {
    background-color: #cccccc;
    margin-top: 8px;
    margin-left: 60px;
    float: left;
    width: 200px;
    height: 30px;
}

.dz {
    color: red;
    font-size: 25px;
    font-family: "微软雅黑 Light";
    font-weight: 800;
    float: right;
    padding-top: 5px;
    padding-right: 80px;

}

h2{
    padding-top: 20px;
}
img {
    width: 400px;
}

div.img {
    border: 1px solid #cccccc;
    float: left;
    margin: 30px;
    width: 260px;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    background-color: cadetblue;
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #000000;
}

div.desc:hover {
    border: 1px solid #000000;
}

div.clearfolat {
    clear: both;
}

#footer {

    background-color: cadetblue;
    clear: both;
    text-align: center;
    line-height: 20px;
    color: #FFF;
    padding-top: 10px;
    padding-bottom: 15px;
}

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";
    }

}

posted on 2017-11-02 21:55 137陈楚洪阅读(141) 评论(0) 编辑收藏举报

刷新页面返回顶部

137陈楚洪

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

导航

公告