码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-03 21:54:48      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:doctype   底部   模板   alt   style   lang   var   20px   dex   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../static/base.css" rel="stylesheet" type="text/css">
    <script src="../static/base.js"></script>
</head>
<body class="bodycolor" id="myBody">
<div class="daohanglang" id="daohanglang">
    <nav>
                <img class="turn_on_off" id="on_off" onclick="mySwitch()" src="../static/image/on.jpg" width="40px">
                <a class="daohang"  href="">首页</a>
                <a class="daohang"  href="">卢浮宫</a>
                <a class="daohang"  href="">塞纳河</a>
                <a class="daohang"  href="">埃菲尔铁塔</a>
                <a class="daohang"  href="">香榭丽大道</a>
                <a class="daohang"  href="">巴黎圣母院</a>
                <input class="sousuo" id="sousuo" type="text" placeholder="搜索" >
                <img onclick="chaZhao()" id="chazhao" src="../static/image/on.jpg" width="20px">
                <a class="daohangright" href="" >登录</a>

    </nav>

<HR align=center width=100% color=#c0c0c0 SIZE=1>
</div>
<div class="foot-menu" id="dibudaohang">
    <HR align=center width=100% color=#c0c0c0 SIZE=1>
    <nav>
    <a class="daohang"  href="">法国历史</a>
    <a class="daohang"  href="">法国地图</a>
    <a class="daohang"  href="">旅行攻略</a>
    </nav>
    <p>版权@ linxx</p>
</div>

css

.daohang{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color: #ff6633;
    font-family: "华文行楷";
    margin-top:30px;
}
.daohangright{
    margin-top:60px;
    color: #ff6633;
    text-decoration:none;
    font-weight:bold;
    float:right;
    font-family: "华文行楷";
    font-size: xx-large;
        }

.turn_on_off{
    margin-top:30px;
    margin-right:20px;

}
.shousuo{
    width: 15%;
    hight:12%;
}
.bodycolor{
    background-color: white;
}
.daohanglang{
    background-color: white;
}
.foot-menu{
    width:100%;
    height:60px;
    background-color:white;
    position:fixed;
    bottom:0;/**距离底部为0*/left:0;z-index:1;
}

js

function mySwitch() {
            var myele = document.getElementById("on_off")
            if (myele.src.match("on")) {
                myele.src = "../static/image/off.jpg"
                document.getElementById("myBody").style.background = "#333333"
                document.getElementById("daohanglang").style.background="#333333"
                document.getElementById("demo").style.color = "white"
            }
            else {
                myele.src = "../static/image/on.jpg"
                document.getElementById("myBody").style.background = "white"
                document.getElementById("daohanglang").style.background="white"
                document.getElementById("demo").style.color = "black"
            }
        }

技术分享

技术分享

 

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

标签:doctype   底部   模板   alt   style   lang   var   20px   dex   

原文地址:http://www.cnblogs.com/xxxiaoxiannv/p/7780211.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!