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

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

时间:2017-11-04 21:33:14      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:z-index   position   调用   mys   首页   doc   fixed   bsp   安全   

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
  2. 父模板的制作
    1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js
      <!DOCTYPE html>
      <html lang="en" xmlns:color="http://www.w3.org/1999/xhtml">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <link rel="stylesheet" type="text/css" href="../static/css/js11_3.css">
          <script src="../static/js/js11_3.js"></script>
      </head>
      
      <body class="bodycolor" id="myBody">
      <div class="navigation" id="navigation">
          <nav>
              <img class="on_off" id="on_off" onclick="mySwitch()" src="../static/images/pic_bulbon.gif" width="50px">
              <a class="nav" href="{{ url_for(‘index‘) }}">首页</a>
              <a class="nav" href="">下载</a>
              <input class="search" type="text"name="search">
              <button type="submit">搜索</button>
              <a class="l_r" href="{{ url_for(‘login‘) }}">登录</a>
              <a class="l_r" href="{{ url_for(‘regist‘) }}">注册</a>
          </nav>
          <hr align="center" width="100%" color="#c0c0c0" size="1">
      </div>
      <div class="bottom">
          <hr align="center" width="100%" color="#c0c0c0" size="1">
          <nav>
              <a class="nav" href=""><span>关于我们</span></a>
              <a class="nav" href=""><span>意见反馈</span></a>
              <a class="nav" href=""><span>安全保障</span></a>
          </nav>
      </div>
      </body>
      </html>
      

        

      .bodycolor{
          background-color: white;
      }
      
      .navigation{
          background-color: white;
      }
      
      .on_off{
          margin-top: 30px;
          margin-right: 20px;
      }
      
      .nav{
          margin-top: 30px;
          margin-right: 20px;
          font-weight: bold;
          font-size: large;
          font-family: 宋体;
          color: steelblue;
          text-decoration: none;
      }
      
      .l_r{
          margin-top: 60px;
          font-weight: bold;
          font-size: large;
          font-family: 宋体;
          color: steelblue;
          float: right;
          text-decoration: none;
      }
      
      .search{
          width: 15%;
          hight:12%;
      }
      .bottom{
          width:100%;
          height:50px;
          text-align: center;
          background-color:white;
          position: fixed;
          bottom:0;
          left:0;
          z-index:1;
      }
      

        

      function mySwitch()
              {
                  var myele=document.getElementById("on_off");
                  if(myele.src.match("bulbon"))
                  {
                      myele.src="../static/images/pic_bulboff.gif";
                      document.getElementById("myBody").style.background="gray";
                      document.getElementById("myBody").style.color="white";
                  }
                  else
                      {
                          myele.src="../static/images/pic_bulbon.gif";
                          document.getElementById("myBody").style.background="white";
                          document.getElementById("myBody").style.color="black";
                      }
              }
      

        技术分享技术分享

       

       

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

标签:z-index   position   调用   mys   首页   doc   fixed   bsp   安全   

原文地址:http://www.cnblogs.com/suxihong/p/7779317.html

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