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

Posted 2020-10-13 吴代祺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了夜间模式的开启与关闭，父模板的制作相关的知识，希望对你有一定的参考价值。

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

父模板的制作

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSGO</title>
    <link href="../static/css/daohang.css" rel="stylesheet" type="text/css">
    <script src="../static/js/base.js"></script>
</head>
    <body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509701877012&di=44ee63599bf26c9aeaed4c59232f7b73&imgtype=0&src=http%3A%2F%2Fi0.letvimg.com%2Flc06_crawler%2F201710%2F27%2F16%2F07%2F1509091667478-6.jpg"
<body>
<div class="navbox">
    <div class="nav">
      <div class="logo">
          <a href="" class="toweb">
             <img src="http://www.csgo.com.cn/web201608/images/cslogo.png" alt="CSGO官方网站">
          </a>
      </div>
      <div class="nav_list">
        <a href="">
          <span></span>
          <h4>首页</h4><p>HOME</p>
        </a>
        <a href="">
          <span></span>
          <h4>新闻资讯</h4><p>NEWS</p>
        </a>
        <a href="">
          <span></span>
          <h4>电竞中心</h4><p>ESPORTS</p>
        </a>
        <a href="">
          <span></span>
          <h4>精彩视频</h4><p>VIDEOS</p>
        </a>
        <a href="">
          <span></span>
          <h4>玩家攻略</h4><p>TIPS</p>
        </a>
        <a href="">
          <span></span>
          <h4>游戏资料</h4><p>GUIDES</p>
        </a>
        <a href="">
          <span></span>
          <h4>个人中心</h4><p>MEMBERS</p>
        </a>


      </div>
    </div>

<div class="chuangjian">
        <a href="http://127.0.0.1:5000/login">
          <span></span>
          <h4>登陆</h4><p>LOGIN</p>
        </a>
          <a href="http://127.0.0.1:5000/zhuce">
          <span></span>
          <h4>注册</h4><p>REGISTER</p>
        </a>

          </div>
>


</div>


</body>

</html>

.navbox{position:relative;width: 100%;/* height: 329px; */min-width: 1230px;border-top: 0px solid #6b9ac8;background: #111521;}
.nav{width: 1230px;height: 120px;margin: 0 auto;position: relative;}
.logo{width: 134px;height: 64px;margin-right: 100px;padding: 8px  8px 23px;float: left;}
.logo a{width: 100%;height: 64px;display: block;}
.logo a img{height: 100%;display: block;}
.nav_list{padding-top: 20px;float: left;}
.nav_list a{height: 57px;margin: 0 25px;display: block;color: #fff;font-size: 18px;position: relative;float: left;}
.nav_list a p{font-size: 10px;cursor: pointer;font-size: 12px;}
.nav_list a h4{cursor: pointer;font-size: 16px;}
.nav_list a span{width: 100%;height: 3px;position: absolute;top: 100%;left: 0;background: #3b92e6;display: none;}
.nav_list a.on,.nav_list a:hover{border-bottom: 3px solid #566e95;}
.chuangjian{padding-top: 250px;right: 1000px;float: left;color:red;}

以上是关于夜间模式的开启与关闭，父模板的制作的主要内容，如果未能解决你的问题，请参考以下文章

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