zoukankan      html  css  js  c++  java
  • 夜间模式的开启与关闭,父模板的制作

    1. 夜间模式的开启与关闭
      1. 放置点击的按钮或图片。
      2. 定义开关切换函数。
      3. onclick函数调用。
    2. 父模板的制作
      1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
      2. 汇总相关的样式形成独立的css文件。
      3. 汇总相关的js代码形成独立的js文件。
      4. 形成完整的base.html+css+js
         1 <!DOCTYPE html>
         2 <html lang="en">
         3 <head>
         4     <meta charset="UTF-8">
         5     <title>夜晚模式</title>
         6     <script>
         7         function mySwitch(){
         8             var oBody=document.getElementById("myBody");
         9             var oOnoff=document.getElementById("myOnOff");
        10             if(oOnoff.src.match("bulbon")){
        11                 oOnoff.src="https://www.runoob.com/images/pic_bulboff.gif";
        12                 oBody.style.background="black";
        13                 oBody.style.color="white";
        14             }else{
        15                 oOnoff.src="https://www.runoob.com/images/pic_bulbon.gif";
        16                 oBody.style.background="white";
        17                 oBody.style.color="black";
        18             }
        19         }
        20     </script>
        21 </head>
        22 <body id="myBody">
        23 <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif" width="40px">
        24 <script>
        25     document.write(Date())
        26 </script>
        27 </body>
        28 </html>
         1 <!DOCTYPE html>
         2 <html lang="en">
         3 <head>
         4     <meta charset="UTF-8">
         5     <title>Welcome to GZCC</title>
         6     <base href="http://www.gzcc.cn/" target="_blank">
         7     <link rel="stylesheet" href="../css/denglukuang.css" type="text/css" >
         8     <script type="text/javascript" src="../js/muban.js"></script>
         9 </head>
        10 <nav>
        11     <a href="" target="_blank"><img src="http://www.gzcc.cn/2016/images/footer1-logo.png" id="logo" alt="logo"></a>
        12     <button type="submit">首页</button>
        13     <button type="submit">信息学院</button>
        14     <button type="submit">外国语学院</button>
        15     <button type="submit">会计学院</button>
        16     <button type="submit">旅游学院</button>
        17     <input type="text" placeholder="学院搜索">
        18     <button type="submit">搜索</button>
        19 </nav>
        20 <body>
        21 <div class="bigdiv">
        22     <div><h3>新用户</h3></div>
        23     <div>
        24             用户:<input id="uname" type="text"  placeholder="用户名">
        25     </div>
        26     <div>
        27             密码:<input id="upass" type="password"  placeholder="密码"><br>
        28     </div>
        29     <div id="error_box"><br></div>
        30     <div>
        31         <button class="button" onclick="fnLogin()">登录</button>
        32         <button class="button">注册</button>
        33     </div>
        34     <div><h6>版权归江南皮革厂所有</h6></div>
        35     <p>如有疑问可联系小梁</p>
        36 </div>
        37 </body>
        38 </html>
  • 相关阅读:
    Java 泛型约束
    Java 单例模式
    Java中的Atomic包使用指南
    基数排序
    归并排序
    插入排序
    选择排序
    交换排序
    Java多线程 LockSupport
    Java并发控制:ReentrantLock Condition使用详解
  • 原文地址:https://www.cnblogs.com/951111ldj/p/7774473.html
Copyright © 2011-2022 走看看