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

  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>Hogwarts</title>
    <base  target="_blank">
    <link rel="stylesheet" type="text/css" href="../static/css/first.css">
    <script src="../static/js/first.js"></script>

</head>
<body class="body" id="myBody">

<div class="title">
    <nav class="nav">
        <img id="on_off" onclick="mySwitch()" src="../static/images/bulboff.jpg" width="50px">
        <a href="{{ url_for('first') }}">首页</a>
        <a href="">校园新闻</a>
        <a href="">格兰芬多</a>
        <a href="">赫奇帕奇</a>
        <a href="">拉文克劳</a>
        <a href="">斯莱特林</a>
        <a href="{{ url_for('sign_up') }}">登陆</a>
        <a href="{{ url_for('sign_in') }}">注册</a>
        <a href="">退出</a>
        <input type="text"name="search">
        <button type="submit">搜索</button>
    </nav>
    <h1>霍格沃兹校园论坛</h1>
    <h2>Hogwarts'BBS</h2>
</div>
<div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">校长室</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>

<div class="copyright">
    <p>Copyright &copy; 2017. Created by <a href="#" target="_blank">Judy_L</a></p>
</div>

</body> </html>
 .body{
     background-image:url(http://i-7.vcimg.com/e30ada70725f8e4e9c5ef458e37806c3317609/origin.jpg);
     background-size: 100%;
     font-family: 华文楷体;
     font-size: 20px;
     font-weight: bolder;
 }
 a{
     color:silver;
 }

h1{
    font-family: "Microsoft JhengHei";
    font-size:40px;
    color:silver;
   }
 h2{
     font-family:"Baskerville Old Face";
     font-size:35px;
     color:silver;
   }
.title nav{
    float:right;
}
        #bottom{
     position:fixed;
            bottom:50px;
            left:570px;
}
        #bottom a{
            font-size: 12px;
            color: #828078;
            text-decoration: none;
        }
.copyright {
            position:fixed;
            bottom:0;
            left:605px;;
}

.copyright p, .copyright a {
  color: #828078;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.3s ease-out;
}
.copyright p a:hover, .copyright a a:hover {
  color: #f2672e;
}
function mySwitch()
{
    var myele=document.getElementById("on_off")
    if (myele.src.match("bulbon"))
    {
        myele.src="../static/images/bulboff.jpg"
        document.getElementById("myBody").style.background=""
        document.getElementById("demo").style.color=""
    }
    else
    {
        myele.src="../static/images/bulbon.jpg"
        document.getElementById("myBody").style.background="black"
        document.getElementById("demo").style.color=""
    }
}

 

posted @ 2017-11-04 20:34  011赖颖璇  阅读(157)  评论(0)    收藏  举报