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

Posted 张木清

tags:

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="../static/css/base.css" type="text/css">
    <script src="../static/js/base.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="mubody">

<img id="muonoff" onclick="muSwitch()"
     src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0on.jpg" width="80px">

<script>
    document.write(Date())
</script>


<ul class="nav nav-pills">
    <li class="active"><a href="#">发现音乐</a></li>
    <li><a href="#">我的音乐</a></li>
    <li><a href="#">朋友</a></li>
    <li><a href="#">商城</a></li>
    <li><a href="#">音乐人</a></li>
    <li><a href="#">下载客户端</a></li>
    <li><a href="#">
        <span class="glyphicon glyphicon-user"></span> 注册
        </a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-log-in"></span>登录
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">手机登录</a></li>
             <li><a href="#">微信登录</a></li>
             <li><a href="#">QQ登录</a></li>
             <li><a href="#">新浪微博登录</a></li>
             <li><a href="#">网易邮箱账号登录</a></li>

        </ul>
    </li>
</ul>


<div class="area">
</div>

<div class="coverd">
    <div class="img">
        <a href="http://music.163.com/"><img
                src="http://i04.pic.sogou.com/6ea5a644659a2ddc"></a>
        <div class="desc"><a href="http://music.163.com/">陈奕迅</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="http://i04.pic.sogou.com/adca151a5e669ec8"></a>
        <div class="desc"><a href="http://music.163.com/">周杰伦</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="http://i01.pic.sogou.com/4cbe902a63b7c16d"></a>
        <div class="desc"><a href="http://music.163.com/">张学友</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="http://p3.pstatp.com/large/19e9000e09a816a13543"></a>
        <div class="desc"><a href="http://music.163.com/">华晨宇</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=886930912,1435518593&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">古巨基</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="http://p4.music.126.net/o6DNZ8nWmRScwUYP3ukHdg==/8003345139814445.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">容祖儿</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4076724071,2219231128&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">孙燕姿</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882180407,2666551305&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">莫文蔚</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2712041981,4202677588&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">陈小春</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=819435915,1277380989&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">五月天</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1972568287,3878107689&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">谢安琪</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2837743540,3774445789&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">张杰</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2230235086,106225297&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">梁静茹</a></div>
    </div>
    <div class="img">
        <a href="http://music.163.com/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2863595005,2326737300&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://music.163.com/">林俊杰</a></div>
    </div>
</div>
     <div id="footer" style="background-color: red;clear: both;text-align: center"><i>网易公司版权@1997-2017</i></div>>>
</body>
</html>

base.css

.img {
    border: 1px solid #cccccc;
    width: 95px;
    margin: 5px;
    float: left;

}
div.img img {
    width: 100%;
    height: auto;
}
div.desc {
    text-align: center;
    padding: 5px;
}
div.img:hover {
    border: 1px solid #000000;
}
.area {
    height: 300px;
}
.coverd {
    height: 180px;
}

base.js

function muSwitch() {
            var mbody = document.getElementById("mubody");
            var monoff = document.getElementById("muonoff");
            if (monoff.src.match("gp=0on")) {
                monoff.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0off.jpg";
                mbody.style.background = "black";
                mbody.style.color = "white";

            } else {

                monoff.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2746814473,3651115714&fm=27&gp=0on.jpg";
                mbody.style.background = "white";
                mbody.style.color = "black";
            }
        }

白天

黑夜

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

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

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

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

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

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

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