码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-02 22:03:54      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:content   模式   校园   float   arc   put   func   order   styles   

 


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

      js

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

       

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

标签:content   模式   校园   float   arc   put   func   order   styles   

原文地址:http://www.cnblogs.com/lintingting/p/7774639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!