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

时间：2017-11-04 14:53:15 阅读：165 评论：0 收藏：0 [点我收藏+]

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。

父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。

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

<!DOCTYPE html>
<html lang="en">
<head>
<body bgcolor="#5f9ea0"></body>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
         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";
            }

        }
    </script>
</head>
<body id="myBody">
<img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="20px";>
<body>
<h1>简书</h1>
<nav>
    <a href="{{ url_for("jianshu2")}}">首页</a>
    <a href="{{ url_for(‘login‘ )}}" class="right">注册</a>
    <a href="{{ url_for(‘regiter‘ )}}" class="right">登录</a>
    <a href="">退出</a>
    <input type="text"name="search">
    <button type="submit">搜索</button>
    <a href="">下载</a>
    <a href="">播放记录</a>
    <a href="">最新咨讯</a>
</nav>
<br>
<div class="recommend" >
    <div class="img">
            <a href=""><img src="../image/1.jpg" width="250" height="100" ></a>
            <div class="desc"><a href="../123/image/1.jpg" >简书交友</a></div>
        </div>
    <div class="img">
        <img src="../image/2.jpg" width="250" height="100"></a>
        <div class="desc"><a href="../static/image/2.jpg" >读书</a></div>
        </div>
    <div class="img">
       <img src="../image/3.jpg" width="250" height="100" ></a>
     <div class="desc"><a href="../static/image/2.jpg" >散文</a></div>
        </div>
        <div id="bottom">
    <a href="">联系我们</a>
    <a href="">加入我们</a>
    <a href="">帮助中心</a>
    <a href="">合作伙伴</a>
</div>

 </div>
 </div>
 </div>
</body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" type="text/css" href="../static/css/a.css">
  <script src="../static/js/denglu.js"></script>
</head>
<body>
<div class="box">
 <div id="container" style="width: 400px"align="center">
      <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">会员登录</h2></div>
      <div id="content" style="background-color:lightpink;height:205px;width:400px;float:left;">
            <p></p>
          <div class="input_box">
              Username:<input id="uname"type="text" name="username"placeholder="请输入用户名"><br>
          </div>
               <br>
              <div class="input_box">
              Password:<input id="upass"type="password" name="password"placeholder="请输入登录密码"><br>
               </div>
          <div id="error_box"><br></div>
          <div class="input_box">
                <input type="radio">普通会员
                    <input type="radio">金牌会员
                    <input type="radio">钻石会员 </div><br>
             <div class="input_box">
              <button onclick="fnLogin()">登录</button>
              <button type="button" onclick=window.alert("是否取消登录！")>取消</button>

</div>
      </div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" type="text/css" href="../static/css/a.css">
  <script src="../static/js/zhuce.js"></script>
</head>
<body>
<div class="box">
 <div id="container" style="width: 400px"align="center">
      <div id="header" style="background-color:lightskyblue"><h2 align="center" style="margin-bottom: 0;">注册</h2></div>
      <div id="content" style="background-color:lightpink;height:205px;width:400px;float:left;">
            <p></p>
          <div class="input_box">
              Username：<input id="uname"type="text" name="username"placeholder="请输入用户名">
          </div>
              <br>
              <div class="input_box">
              Password：<input id="upass"type="password" name="password"placeholder="请输入登录密码">
           </div>
              <br>
          <div class="input_box">
               密码确认：<input id="zhuce" type="password" placeholder="请再次输入密码">
         </div><br>
             <div id="error_box"><br></div>
             <div class="input_box">
              <button onclick="fnLogin()">点击注册</button>
              <button type="button" onclick=window.alert("是否取消注册！")>取消</button>

</div>
</div>
</div>
 </div>
</body>
</html>

body{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}

div.box{
    margin-left:600px ;
    margin-right: 600px;
    text-align: center;
    color: cornsilk;
    border-radius: 150px;
    padding: 10px;
    border-width: 20px;
    bottom: 100px;
}

#input_box{
    font-size: 30px;
    font-family:微软雅黑 ;
    color: hotpink;
    height:40px;
    width: 200px;
    border-radius: 5px;
    background-color: cadetblue;
}

#error_box{
    color: steelblue;
    font-family:华文隶书
}
h2{
    font-size: 30px;
    font-family:微软雅黑 ;
    color: navajowhite;
    text-align: center;
}
#uname{
    border-radius: 10px;
}
#upass{
    border-radius: 10px;
}

技术分享

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

标签：开关 arc 包括用户 run content ack end 联系我们

原文地址：http://www.cnblogs.com/222ya/p/7783068.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行