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

  1. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fire</title>
    <link rel="stylesheet" type="text/css" href="../css/20.css">
    <link rel="stylesheet" type="text/css" href="../css/200.css">
    <script src="../js/39.js"></script>

    <style type="text/css">
        a{
        color:green;background-color:aqua;
        }
    </style>

</head>
<body class="abc">
<h1 align="center"><span style="background-color:yellow;font-size:100px">WELCOME!</span> to GZCC</h1>
<nav>

     <a href="0067.html">INDEX</a>
    <input type="text"name="search">
    <button type="submit">SEARCH</button>
    <a href="login.html">LOGIN</a>
    <a href="rege.html">SINGIN</a>
</nav>

<div>

    <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg">
        </a>
        <div class="desc"><a href="login.html">登陆</a> </div>
    </div>
     <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg">
        </a>
        <div class="desc"><a href="rege.html">注册</a> </div>
    </div>

</div>


<div class="clearfloat">


<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg">

</div>
   <form>
               <select>
                   <option>请选择</option>
                   <option></option>

               </select>

            </form>
            <ul>
                <li>专业与课程建设</li>
                <li>人才培养方案</li>
                <li>教研室建设</li>
                <li>教学通讯</li>
                <li>教师技能大赛</li>
            </ul>
            <ol>
                <li>列表1</li>
                <li>列表2</li>

            </ol>


</form>


</body>
</html>

     


     

    夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js 
      <!DOCTYPE html>
<html lang="en" xml:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function mySwitch()
        {
            var myele= document.getElementById("on_off")
            if(myele.src.match("touch_bbs_thread_img_26459100_1455531733.3102"))
            {
                myele.src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=845f9b9993cad1c8d0eef4214f0e4b31/4a36acaf2edda3ccc8c8339607e93901213f925c.gif"
                document.getElementById("myBody").style.background = "black"
                document.getElementById("myBody").style.color="white"
            }
            else{
                myele.scr="http://touch.hupucdn.com/touch_bbs_thread_img_26459100_1455531733.3102.jpeg"
                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://touch.hupucdn.com/touch_bbs_thread_img_26459100_1455531733.3102.jpeg" width="500px">

<script>
    document.write(Date())
</script>

</body>
</html>

       

       

       

       

posted @ 2017-11-04 18:31  067杜嘉成  阅读(177)  评论(0)  编辑  收藏  举报