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

转载于 2017-11-04 20:15:00 发布 · 43 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JaTae/p/7784436.html

本文介绍了一个简单的网页夜间模式切换功能实现方法，并展示了如何创建包含公共元素的父模板，如顶部导航栏和底部版权信息。通过使用HTML、CSS和JavaScript，实现了按钮点击时页面背景颜色的变化。

1.夜间模式的开启与关闭

放置点击的按钮或图片。定义开关切换函数。onclick函数调用。

2.父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

汇总相关的样式形成独立的css文件。

汇总相关的js代码形成独立的js文件。

形成完整的base.html+css+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
     <link href="../static/CSS/index.css" rel="stylesheet">
    <script src="../static/JS/index.js"></script>
</head>
<body id="myBody">

<header>
  <nav>
    <ul>
      <li><a href="{{ url_for("index") }}" title="首页" target="_blank">首页</a></li>
      <input type="text"id="search" name="search">
        <button id="button1"type="submit">搜索</button>
        <li><a href="{{ url_for("login") }}" title="登录" target="_blank">登录</a></li>
      <li><a href="{{ url_for("register") }}" title="注册" target="_blank">注册</a></li>
      <li><a href="#" title="退出" target="_blank">退出</a></li>

    </ul>
      <img id="myOnOff" onclick="mySwitch()" src="https://www.runoob.com/images/pic_bulbon.gif"height="30px" width="40px">
  </nav>
</header>

<div class="js">
        <a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html">
            <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01be8bb2970943347e.jpg"></a>
        <div class="aa"><a href="http://www.360kan.com/ct/OkTla57jMYCzDz.html">第一季</a></div>
    </div>
    <div class="js">
        <a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html">
            <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01b77032aeaa56c9b0.jpg"></a>
        <div class="aa"><a href="http://www.360kan.com/ct/QkHnbM3lNYW2CD.html">第二季</a></div>
    </div>
    <div class="js">
        <a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html">
            <img src="http://p1.so.qhimgs1.com/bdr/_240_/t01caee8f397eef076d.jpg"></a>
        <div class="aa"><a href="http://www.360kan.com/ct/QEbscp7kLIOuDT.html">第三季</a></div>
    </div>
    <div class="js">
        <a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html">
            <img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e74b11e1fa409bad.jpg"></a>
        <div class="aa"><a href="http://www.360kan.com/ct/PEPpaZ7jMYC0Dz.html">第四季</a></div>
    </div>
</body>

<div id="bottom">
      Copyright@ 2017 个人版权，版权所有　　
 </div>

</html>

@charset "utf-8";

nav{
    float: left;
    width:100%;
    height:40px;
    background-image:url(../image/blue.jpg);

    padding: 0 ;
}

nav ul {
    float:left;
    margin: 0px;
    padding: 0 0 0 0;
    width: 920px;
    list-style: none;
}

nav ul li {
    display: inline;
}

nav ul li a {
    float: left;
    padding: 11px 20px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-family: Tahoma;
    outline: none;
}

nav li a:hover {
    color: #2a5f00;
}


#search{
    float:right;
    margin:5px;

}
#button1{
    margin-left: 15px;
    float:right;
    margin:5px;
}


 #bottom{
     position:fixed;
            bottom:0px;
            left:600px;
     text-align:center;
}

 .js{

width:200px;
float:left;
margin:5px;
 }
.js img{
width:100%;
height:100px;
}
.aa{
text-align:center;
padding:5px;
}
.js:hover{
    border:1px solid blue;
}
.clearfloat{
    clear: both;

function mySwitch(){
            var uBody=document.getElementById("myBody");
            var Onoff=document.getElementById("myOnOff");
            if(Onoff.src.match("bulbon")){
                Onoff.src="https://www.runoob.com/images/pic_bulboff.gif";
                uBody.style.background="black";
                uBody.style.color="white";
            }else{
                Onoff.src="https://www.runoob.com/images/pic_bulbon.gif";
                uBody.style.background="white";
                uBody.style.color="black";
            }
        }