1、夜间模式的开启与关闭

放置点击的按钮或图片。

定义开关切换函数。

onclick函数调用。

 

html代码：

javascript代码：

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

 

 

 

       2、父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

汇总相关的样式形成独立的css文件。

汇总相关的js代码形成独立的js文件。

形成完整的base.html+css+js

 

html代码：

    
             
         
     
        
                  首页                            
      登录        
      注册        
      
      
    
     
     
    
      
用户导航
    
      
    
      
        
                           
       
            
        学校荣誉        
       
    
      
    
      
        
                           
       
            
        师生获奖        
       
    
      
    
      
        
                           
       
            
        领导关怀        
       
    
      
    
      
        
                           
       
            
        数字广商        
       
    
      
    
      
        
                           
       
            
        画说校园        
       
    
      
    
      
        
                           
       
            
        视频广商        
       
    
      
    
      
        
                           
       
            
        全景校园        
       
    
      
    
      
        
                           
       
            
        校友风采        
       
    
      
     
     
          版权 © runoob.com
     

 

css代码：

.header{
       background-color:cadetblue;    height: 60px;    line-height: 40px;}.search-input {
       background-color: #cccccc;    margin-top: 8px;    margin-left: 60px;    float: left;    width: 200px;    height: 30px;}.dz {
       color: red;    font-size: 25px;    font-family: "微软雅黑 Light";    font-weight: 800;    float: right;    padding-top: 5px;    padding-right: 80px;}h2{
       padding-top: 20px;}img {
       width: 400px;}div.img {
       border: 1px solid #cccccc;    float: left;    margin: 30px;    width: 260px;}div.img img {
       width: 100%;    height: auto;}div.desc {
       background-color: cadetblue;    text-align: center;    padding: 5px;}div.img:hover {
       border: 1px solid #000000;}div.desc:hover {
       border: 1px solid #000000;}div.clearfolat {
       clear: both;}#footer {
       background-color: cadetblue;    clear: both;    text-align: center;    line-height: 20px;    color: #FFF;    padding-top: 10px;    padding-bottom: 15px;}