一阶段项目总结

1.实用CSS属性

background-color: rgba(34,38,44,0.3) 背景半透明化

background-image: url(../img/W7DDWUACKJ1A1517317609671.jpg);
background-position: -260px -0px;//图片位置
background-size: 119.5% 400px ;//图片大小
background-repeat: no-repeat;//图片重复

transition: all 1.2s; //高宽同时放大，1.2秒内执行完毕
transform：scale(1.1);图片放大 数字为放大倍数
上面两条属性需要结合使用

overflow:hidden;//隐藏超出元素范围的内容
display: none;//隐藏元素
display: block;//转为块级元素
这三条属性结合使用可以实现元素的隐藏与再现，非常适合用来做交互式导航等内容

2.JS效果思路

利用数字来判断点击次数：

var i = 1;
var j = 2;
var a = document.getElementById("game");
var b = document.getElementById("gamei");
var c = document.getElementById("story");
var d = document.getElementById("storyi");
var hg = document.getElementById("hg");
var hs = document.getElementById("hs"); 
function sel1(){
        if(i%2==1){
            a.style.color="white";
            b.style.right="48px";
            hg.style.display="block";
        } 
        if(i%2==0){
            hg.style.display="none";
            a.style.color="#f4d04d";
            b.style.right="0px";
        } 
        if(hs.style.display=="block"){ //检测另一个隐藏元素是否显示，如果显示则令其隐藏，使得两个元素不会同时显示
            hs.style.display="none";
            c.style.color="#f4d04d";
            d.style.right="0px";
        } 
        j=2;  //可使另外一个元素处于第一次点击的状态
        i++;
}
function sel2(){

        if(j%2==0){
            c.style.color="white";
            d.style.right="48px";
            hs.style.display="block";
        }
        if(j%2==1){
            hs.style.display="none";
            c.style.color="#f4d04d";
            d.style.right="0px";
        } 
        if(hg.style.display=="block"){
             hg.style.display="none";
             a.style.color="#f4d04d";
             b.style.right="0px";
        }
        i=1;
        j++;
}

判断侧面滑动栏滑动距离来改变导航位置：

var na = document.getElementById("mnav"); 
function mnav(){
                var tp = document.documentElement.scrollTop;
                if(tp>0){
                    na.style.top="0px";
                }
                if(tp==0){
                    na.style.top="41px";
                }
                
            }
var timer = setInterval(
        function(){
            mnav();
        },300);  //实时监测滑动栏滑动距离

PS:上面方法的改进版

window.onscroll=function(){
    function mnav(){
    var h = window.scrollY; //获取滚动条Y轴即垂直滚动条滚动距离
    if(tp>0){
        na.style.top="0px";
    }
    if(tp==0){
        na.style.top="41px";
        }
                
    }
}
 window.scrollY 优势在于可做到实时检测，满足条件只执行一次函数，避免了使用定时器占用资源，以及函数被错误的重复调用的问题。
缺点在于，只有页面滚动时才会调用函数，如果页面一直不滚动，则函数一直不调用，而document.documentElement.scrollTop
配合定时器，可实现实时监测滚动条的距离。

均分图片移动距离实现图片滚动动画：

var nico1 = document.getElementById("nico1");
var nico2 = document.getElementById("nico2");
var nico3 = document.getElementById("nico3");

var m = 0;
var n = -25;
var timer1;
var timer2;
function mover1(){
        function mv1(){
            m=m-2.5;//距离均分，多次移动
            nico1.style.top = m+"px";
            if(m==-25){
                clearInterval(timer1);
                return m = 0;  //数值还原，否则下一次移动会按照m=-25来进行计算
            }
        }
        timer1 = setInterval(function(){mv1();},20);//连续调用函数
}
function mout1(){
        function mo1(){
            n=n+2.5;
            nico1.style.top = n+"px";
            if(n==0){
                clearInterval(timer2);
                return n = -25;
            }
        }
        timer2 = setInterval(function(){mo1();},20);
}

PS:<a href="javascript:void(0)"></a> 避免点击链接后，自动跳到页面顶部。

3.总结

position:relative 元素原来占用位置依旧存在，慎用。

注意细节设计，一些小小的效果实现能显著提高网页的实用性。

多做注释，提高代码可读性，也方便其他人接手自己当前的项目。

JS变量、CSS选择器命名要规范，提高可读性，也能防止代码量提高后造成的命名混乱问题。

CSS选择器可多采用分组设计，具有同样属性的选择器分为一组，不同的属性再单独定义，可以减少代码量。

如果一个网页的顶部导航和底部信息等样式相同，则可以先设计好模板，再填写内容，可大大提高网页制作效率。