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

时间：2017-11-02 21:59:02 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：float 夜间模式 ext black 技术 span 分享登录 var

<!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("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="40px">
<script>
    document.write(Date())
</script>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>夜间模式</title>

<link rel="stylesheet" type="text/css" href="../static/css/wang.css">
     <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>
<script>
    document.write(Date())
</script>
<nav>
 <a href="http://www.gzcc.cn/">首页</a>
 <input type="text" ></input>
 <button type="submit">搜索</button>
 <a href="">登录</a>
 <a href="">注册</a>
</nav>
<p align="right"><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"></p>



<body id="myBody">



<div class="recommond">
    <div class="img">
        <a href="http://www.517sc.com/"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1007329817,342892403&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://www.517sc.com/">乐山大佛</a></div>
    </div>
    <div class="img">
        <a href="http://www.517sc.com/"><img
                src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4065865959,820293466&fm=27&gp=0.jpg"></a>
        <div class="desc"><a href="http://http://www.517sc.com">九寨风光</a></div>
    </div>
    <div class="img">
        <a href="http://www.517sc.com/"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509104616&di=ca76ee0bec2cac4753bf670a7189a772&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.people.com.cn%2FNMediaFile%2F2015%2F1027%2FMAIN201510270746000511358493860.jpg"></a>
        <div class="desc"><a href="http://www.517sc.com">国宝熊猫 </a></div>
    </div>


</div>
</body>



</html>

img {
    width: 180px;
}
div.img{
border:1px solid #cccccc;
     float: left;
      margin: 5px;
      width:180px;
    height: 200px;
  }
 div.img img{
     width:100%;
     height:100%;
 }
 div.desc{
     text-align: center;
     padding: 5px;
 }
 div.img:hover{
      border:1px solid #000000;
 }

技术分享

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

标签：float 夜间模式 ext black 技术 span 分享登录 var

原文地址：http://www.cnblogs.com/0542054ghgf/p/7774618.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)

周排行