YWEIEN

导航

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

 

  1. 夜间模式的开启与关闭
    1. 放置点击的按钮或图片。
    2. 定义开关切换函数。
    3. onclick函数调用。
<!DOCTYPE html>
<html lang="en" xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function mySwitch()
        {
          var myele= document.getElementById("on_off")
         if(myele.src.match("bulbon"))
         {
             myele.src="http://www.runoob.com/images/pic_bulboff.gif"
             document.getElementById("myBody").style.background="black"
             document.getElementById("myBody").style.color="white"

         }
         else
         {
             myele.src="http://www.runoob.com/images/pic_bulbon.gif"
            document.getElementById("myBody").style.background="white"
             document.getElementById("myBody").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">

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


</body>
</html>

 

 

 2，父模板的制作

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

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="t2.css" type="text/css">
    <script src="t2.js"></script>

</head>
<body id="myBody">
<nav>

    <div class="layui-col-md4">
        <div class="layui-row" style="padding-top:10px;">
            <img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"
                 style="padding-left: 10px;">
            <a href="https://www.taobao.com/?spm=a2e15.8261149.1581860521.1.2b6eeee6RU9jH1">淘宝首页</a>
            <a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.2017.754894437.1.7150e3562VVO2U&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F%3Fspm%3Da2e15.8261149.1581860521.1.2b6eeee6RU9jH1">登录</a>
            <a href="https://reg.taobao.com/member/reg/fill_mobile.htm">注册</a>

        </div>
    </div>
    <br>
    <form method="get" action="#">
        <div class="layui-row">
            <div class="layui-col-md3" style="padding-left: 50px;">
                <input type="text" name="title" required lay-verify="required"
                       placeholder="请输入关键词"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md3" style="padding-left: 50px;">
                <button type="submit" class="layui-btn layui-btn-primary">搜索</button>
            </div>
        </div>
    </form>
    </div>
</nav>
<div class="area">

</div>


<div class="area1">
    <div class="img">
        <a href="https://img.alicdn.com/tfs/TB19jqPXNrI8KJjy0FpXXb5hVXa-228-210.jpg_q90.jpg"><img
                src="https://img.alicdn.com/tfs/TB19jqPXNrI8KJjy0FpXXb5hVXa-228-210.jpg_q90.jpg"></a>
        <div class="desc"><a
                href="https://1111.tmall.com/?spm=a21bo.2017.201857.2.2c16e6a7leLha5&wh_weex=true&wh_main=true">双十一会场</a>
        </div>
    </div>
    <div class="img">
        <a href="https://img.alicdn.com/tps/i4/T1AlHkFPNdXXaCwpjX.png"><img
                src="https://img.alicdn.com/tps/i4/T1AlHkFPNdXXaCwpjX.png"></a>
        <div class="desc"><a href="https://www.taobao.com/markets/nvzhuang/taobaonvzhuang?spm=a21bo.2017.201867-main.1.2c16e6a7leLha5">淘宝女装</a></div>
    </div>

</div>

<br>
<br>
<footer>

</footer>
</body>
</html>

CSS

.img {
    border: 1px solid #f36974;
    width: 250px;
    margin: 10px;
    float: left;

}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    padding: 5px;
}

div.img:hover {
    border: 1px solid #e20c60;
}

.area {
    height: 300px;
}


.area1 {
    height: 300px;
}

.area2 {
    height: 300px;
}

 nav{
    position:fixed;
    top:0px;
    height: 58px;
    background-color:#FCFCFC;
    border-bottom:1px solid #DDDDDD;
    width:100%;
 }

JS

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";
            }
        }

 

posted on 2017-11-04 21:06  YWEIEN  阅读(359)  评论(0)  编辑  收藏  举报