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

Posted 2020-10-13 李笑晴

tags:

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

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

父模板的制作

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

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

<!DOCTYPE html>
<html lang="en"xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜间模式</title>
<script>
    function mySwitch()
{
    var myele=document.getElementById("on_off")
    if(myele.src.match("bulboff"))
    {
    myele.src="http://www.runoob.com/images/pic_bulbon.gif"
   document.getElementById("myBody").style.backgroundColor="black"

   document.getElementById("demo").style.color="white"
   }
   else
    {
        myele.src="http://www.runoob.com/images/pic_bulboff.gif"
        document.getElementById("myBody").style.backgroundColor="white"

        document.getElementById("demo").style.color="black"

    }
}
</script>
</head>
<body id="myBody">
<img id="on_off"onclick="mySwitch()"src="http://www.runoob.com/images/pic_bulboff.gif"width="50px">
<p id="demo">ppppppp</p>
<script>

    document.write(Date())
document.getElementById("demo").innerHTML=Date()</script>
<button type="button" onclick=window.alert("!")>date</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
    <link rel="stylesheet" type="text/css" href="../static/css/daohang.css">
     <link rel="stylesheet" type="text/css" href="../static/css/tu.css">
</head>
<body bgcolor="#00ffff">

<ul>
    <li><a class="active" href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">图库</a></li>
    <li><a href="#about">关于</a></li>
    <input class="eat" type="text" name="sousuo" value="请输入内容">
    <input class="eat"type="button" name="submit" value="搜索">
    <li><a href="#about">登录</a></li>
    <li><a href="#about">注册</a></li>
</ul>

<div>
    <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01f52549dbaa0009e2.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">玩法说明</a></div>
    </div>
    <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01953c97e81ffda462.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">攻略百科</a></div>
    </div>
        <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p4.so.qhimgs1.com/bdr/_240_/t01929434685380e98a.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">原声音乐</a></div>
    </div>
             <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01cc8b6adc9fb8ae70.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">游戏素材</a></div>
    </div>
</div>
<div CLASS="clearfloat">
       <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01f52549dbaa0009e2.jpg">
       <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01953c97e81ffda462.jpg">
       <img src="http://p4.so.qhimgs1.com/bdr/_240_/t01929434685380e98a.jpg">
       <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01cc8b6adc9fb8ae70.jpg">
</div>

<div class="tea">唐朝初年各地文风兴盛，人才辈出，唐王有意从国内选拔贤能人士，
    下令每月举办“御前科举大赛”，于是举国上下的才子佳人聚集一堂，准备在大赛中
    一展才华，以期得到唐王的赏识和嘉奖。 </div>


<p id="rcorners6"></p>
</body>
</html>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
.eat{
    margin-top:0.4cm;
}


.tea{
    border:2px solid #a1a1a1;
    padding:10px 500px;
    background:hotpink;
    width:300px;
    border-radius:25px;
}

#rcorners6 {

    background: #8AC007;
    padding: 5px;
    width: 1300px;
    height: 50px;
}

img{
     width:300px;
}
div.img{
    border:1px; solid:#cccccc;
    width:180px;
    float:left;
    margin:5px;
}
div.img img{
    width:100%;
    height:auto;
}
div.desc{
    text-align:center;
    padding: 5px;
}
div.img:hover{
    border: 1px;solid:#777777;
}
.clearfloat{
    clear:both;
}

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

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