代码改变世界

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

2017-11-03 19:51  095罗其婷  阅读(175)  评论(0)    收藏  举报
  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  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>
    <script>
        function mySwitch()
        {
            var oBody=document.getElementById("myBody");
            var myele=document.getElementById("on_off");

            if(myele.src.match("bulbon"))
            {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }
            else
            {
                oBody.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.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>
</body>
</html>
      <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="../static/css/test.css">

</head>
<body>
    <input type="text">
    <button>搜索</button>
<div class="recommend">

    <div class="img">
        <a href="http://www.gzcc.cn">
            <img src="http://www.gzcc.cn/2016/images/yhdh/01.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://www.gzcc.cn/2016/images/yhdh/05.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://www.gzcc.cn/2016/images/yhdh/02.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://www.gzcc.cn/2016/images/yhdh/06.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://www.gzcc.cn/2016/images/yhdh/03.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://www.gzcc.cn/2016/images/yhdh/07.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://www.gzcc.cn/2016/images/yhdh/08.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://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
        <div class="desc">
            <a href="http://www.gzcc.cn">校友风采</a></div>
    </div>
</div>
</body>
</html>
      function mySwitch()
        {
            var oBody=document.getElementById("myBody");
            var myele=document.getElementById("on_off");

            if(myele.src.match("bulbon"))
            {
                myele.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="black";
                oBody.style.color="white";
            }
            else
            {
                oBody.src="http://www.runoob.com/images/pic_bulbon.gif";
                oBody.style.background="white";
                oBody.style.color="black";
            }
        }
      img {
    width: 300px;
}

div .img {
    border: 1px solid deeppink;
    width: 200px;
    float: left;
    margin: 8px;

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


div.desc {
    text-align: center;
    padding: 8px;

}

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