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

Posted 李明惠

tags:

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

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。、
html
<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜间模式</title> <script> function mySwitch(){ var oBody = document.getElementById("myBody"); var oOnoff = document.getElementById("myOnOff"); if(oOnoff.src.match("on")){ oOnoff.src="../static/img/off.jpg"; oBody.style.background="#303030 "; oBody.style.color="white"; }else { oOnoff.src="../static/img/on.jpg"; oBody.style.background="white"; oBody.style.color="gray"; } } </script> </head> <body id="myBody"> <img id="myOnOff" onclick="mySwitch()" src="../static/img/on.jpg" width="40px"> <script> document.write(Date()) </script> </body> </html>
  1. 父模板的制作
    1. 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
    2. 汇总相关的样式形成独立的css文件。
    3. 汇总相关的js代码形成独立的js文件。
    4. 形成完整的base.html+css+js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baseTest</title>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
</head>
<base href="http://www.xiami.com/">

<div class="navbar">
    <nav class="navbar-top">
        <li type="submit" class="active"><a href="" target="_blank">首页</a></li>
        <li type="submit"><a href="#">歌单</a></li>
        <li type="submit"><a href="#">电台</a></li>
        <li type="submit"><a href="#">音乐人</a></li>
        <input type="text" id="select" placeholder="音乐搜索,找人">
        <li type="submit" id="submit"><a href="#">搜索</a></li>

        <li style="float:right" type="submit"><a href="login.html" target="_blank">登录</a></li>
        <li style="float:right" type="submit"><a href="register.html" target="_blank">注册</a></li>


    </nav>
</div>
<div class="navbar-down">
  <a href="#">Test1</a>
  <a href="#">Teat2</a>
  <a href="#">Test3</a>
  <a style="float: right " href="#">Test4</a>


</div>
<body>


</body>
</html>

HTML

.navbar-top{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: gray;
    }
li{
    float: left;
    border-right:1px solid #bbb;
}
li:last-child {
    border-right: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #0099CC;
}
#select{
    margin-top: 10px;
    width: 200px;
    height: 23px;
    font-size: 15px;
}
.navbar-down{
    overflow: hidden;
    background-color: gray;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.navbar-down a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 14px;
    text-decoration: none;
    font-size: 15px;
}

CSS

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

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

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

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

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

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

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