一阶段总结

       一阶段项目是对前段时间学习的总结也是对已掌握知识的提高

　　这次项目我们小组选择了《魔兽世界》的官网，网页的特点就是酷炫，具有很强的视觉冲击力。当然，并不只是表面看起来的华丽，内容也是相当丰富，这就意味着需要解决的问题很多。

　一、CSS样式部分已经解决的问题

1 background-color: rgba(34,38,44,0.3) 背景半透明化
1 background-image: url(../img/W7DDWUACKJ1A1517317609671.jpg);
2 background-position: -260px -0px;//图片位置
3 background-size: 119.5% 400px ;//图片大小
4 background-repeat: no-repeat;//图片重复
5 transition: all 1.2s; //高宽同时放大，1.2秒内执行完毕
6 transform：scale(1.1);图片放大 数字为放大倍数
7 上面两条属性需要结合使用
8 overflow:hidden;//隐藏超出元素范围的内容
9display: none;//隐藏元素
10 display: block;//转为块级元素

   二、天赋页关键功能

　　首先是div的隐藏，用DOM操作可以实现

document.getElementById("bgmid2").style.display="inline-block";

　　天赋详情功能既可以通过单击将技能详情展开，也可以通过点击其他等级的天赋实现将之前展开的技能详情关闭

function a1(curr){
        var a=curr.className;
        var x=document.getElementsByClassName(a);
        var b=document.getElementsByClassName("tblock1");
        var c=document.getElementsByClassName("tblock2");
        var d=document.getElementsByClassName("tblock3");
        var e=document.getElementsByClassName("tblock4");
        var f=document.getElementsByClassName("tblock5");
        var g=document.getElementsByClassName("tblock6");//分别获取到每一行的ClassName
        
        if(x[0].style.height == "265px"){            //通过for循环判断当下有几个技能栏处于展开状态然后每次打开新的技能栏的时候，将技
            for (var i = 0; i < x.length; i++) {　　　　　　能栏的高度还原为65px；
                b[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                c[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                d[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                e[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                f[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                g[i].style.height = "65px";
                }
        }else{
            for (var i = 0; i < x.length; i++) {
                b[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                c[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                d[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                e[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                f[i].style.height = "65px";
                }
            for (var i = 0; i < x.length; i++) {
                g[i].style.height = "65px";
                }
            for (i = 0; i < x.length; i++) {
                x[i].style.height = "265px";
        }
        }   }

技能详情的显示使用了CSS样式中的overflow：hidden属性实现，当点击时通过增大div的高度实现将隐藏内容显示出来。

.tblock1,.tblock2,.tblock3,.tblock4,.tblock5,.tblock6{
            width: 29%;
            height: 65px;
            border: 1px solid #504137;
            float: left;
            margin: 0px 10px;
            background-color: #030506;
            overflow: hidden;
            margin-bottom: 20px;

三、服务器状态页

　　服务器状态页使用一个列表实现的，通过将每一行的设置为不同的Class名，实现表格背景颜色的变化。

　　

<table>
    <tr>
            <td><img src="../img/Icon-checkCircleGreen.png"></td>
            <td>万色星辰</td>
            <td>(PVE)</td>
            <td>低</td>
            <td>CST</td>
            <td>China</td>
        </tr>

        <tr class="alt">
            <td><img src="../img/Icon-checkCircleGreen.png"></td>
            <td>世界之树</td>
            <td>(PVE)</td>
            <td>低</td>
            <td>CST</td>
            <td>China</td>
        </tr>
</table>

四、总结

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

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

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

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

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