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

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。
父模板的制作
1. 制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
2. 汇总相关的样式形成独立的css文件。
3. 汇总相关的js代码形成独立的js文件。
4. 形成完整的base.html+css+js

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>youku</title>
    <base href="http://i1.sinaimg.cn/dy/weather/main/index14/007/icons_32_yl/"target="_blank">
    <link rel="stylesheet" type="text/css" href="T5.css">
    <style type="text/css">
    h1{
      color:gray}
        p{
            color:darkcyan;font-size: 20px;
        }
        .textblue{
            color:pink;
            text-decoration: underline;
        }

        c{
            color:yellow;
        }
    </style>

</head>
<body>
     <nav>
         <img src="w_02_08_00.png">
         <a href="http://www.youku.com//">首页</a>
         <a href="">download</a>
         <input type="text" name="search">
         <button type="submit">搜索</button>
         <a href="">登录</a>
         <a href="">注册</a>
     </nav>


<hr>
     类型
<p>  电视剧</p>
<p >  电影</p>
<p >  综艺</p>
<p > MV《6》</p>



<hr>
</body>
</html>

css

h2{
    align:center;
   }
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 150px;
    padding-left: 100px;
    padding-top: 30px;
    background-color: peachpuff;
    }
#input_box{
    align:center;
    margin:400px;
    padding-left:400px;
    }

#error_box{
    color: hotpink;
    }
body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:30px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif;
}

 js

 function mySwitch() {
      var oBody = document.getElementById("myBody");
      var oOnOff = document.getElementById("myOnOff");
      if (oOnOff.src.match("t017093260071a8a9a3")) {
          oOnOff.src = "http://img.orz520.com/t014babd2bef733fe05.gif";
          oBody.style.background = "black";
          oBody.style.color = "white";
      } else {
          oOnOff.src = "http://p3.so.qhimgs1.com/t017093260071a8a9a3.gif";
          oBody.style.background = "white";
          oBody.style.color = "black";
      }
  }

posted on 2017-11-03 19:19 lishanting 阅读(131) 评论(0) 收藏举报