第一个页面 移动端&PC端

第一个页面 踩过的坑还是不少的

PC端：

1.背景图片

自己第一次做的时候为了图方便，将整个背景图片切成了一张很大的图，考虑到网页的加载效率，只切了背景有图案的那部分，剩下的部分因为是纯色的所以可以用背景颜色的属性来控制

 background: url("../images/b.png") top center no-repeat;
 background-color:#1b1d1e;

这里的代码字体有点丑orz。

2.页面上方，进入官网以及三个分享小图标

这是一个很麻烦的东西，首先进入官网有一个hover的效果，这里用到了CSS的雪碧图，以及CSS的伪类，hover时改变背景图的相对位置

首先麻烦的就是用的之前的学姐的代码，用了一个分享的插件 来自于这个网站http://www.jiathis.com/ 第一次调试时不知道为什么没能将三个图标显示成a标签可点的样子。仔细研究过代码发现，代码中写的只有a标签，但是网页中却在里面插入了span标签 之前我以为网页中的span是代码中就有的，直到我仔细研究了学姐之前页面的代码

代码是这样的

<div class="jiathis_style_24x24">
                <a class="jiathis_button_weixin"></a>
                <a class="jiathis_button_tsina"></a>
                <a class="jiathis_button_tqq"></a>
</div>

网页中检查时的代码居然是这样的

<div class="jiathis_style_24x24">
                <a class="jiathis_button_weixin" title="分享到微信"><span class="jiathis_txt jtico jtico_weixin"></span></a>
                <a class="jiathis_button_tsina" title="分享到微博"><span class="jiathis_txt jtico jtico_tsina"></span></a>
                <a class="jiathis_button_tqq" title="分享到腾讯微博"><span class="jiathis_txt jtico jtico_tqq"></span></a>
            </div>

！代码中竟然没有span标签 ，于是我把我的代码中的span标签注释掉，然而就是这个注释，使我的网页中不能显示为a标签的可点样式，（而且也不能跳转链接），直到我把注释删掉，网页才显示出我想要的样子。第一次遇到注释会影响到代码运行的情况orz。调这个toolbar的位置也调了很久，开始的时候不知道为什么进入官网按钮和三个分享的图标总是一起同步动，最后也不知道为什么就调好了，两个部分的应该互相居中，在调这个的时候还涉及到了这个div的overflow属性。

3.如果要想将块级元素显示在一行：display设置成inline-block

引用：

display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是： 
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

4.左右滑动的导航条

这真的是这个页面中最大的一个难点，搞了好久，而且中间需求也发生了变更，虽然没有推翻之前的代码，但是使之前的代码复杂了好多好多。涉及到了好几层的div

第一个难点就是如何使一个条形的div左右滑动，上网看了一下类似的代码，发现是通过改变一个div的left属性，用jQuery的animate函数，单击左右箭头时使left增加或减少。先把代码贴上来：

<div class="sliderbox">

    <div class="slidebar">
        <div class="left_arrow" >
            <a class="left">
                <span></span>
            </a>
        </div>

        <div class="monthss">
        <div class="months">

            <div class="border7"></div>
            <div class="month later">
                <span >16年</span>
            <br>
                <span class="bigger">7月</span>
            </div>

            <div class="border6"></div>
            <div class="month later">
                <span >16年</span>
            <br>
                <span class="bigger">8月</span>
            </div>
            <div class="border1"></div>
            <div class="month avaliable" >
                <span >16年</span>
            <br>
                <span class="bigger" >9月</span>
            </div>
            <div class="border2"></div>
            <div class="month avaliable" >
                <span>16年</span>
            <br>
                <span class="bigger" >10月</span>
            </div>
            <div class="border3"></div>
            <div class="month avaliable Sep ">
                <span>16年</span>
            <br>
                <span class="bigger">11月</span>
            </div><div class="border4"></div>
            <div class="month  later">
                <span>16年</span>
            <br>
                <span class="bigger">12月</span>
            </div><div class="border5"></div>
            <div class="month later ">
                <span>17年</span>
            <br>
                <span class="bigger">1月</span>
            </div>

        </div>
    </div>
        <div class="right_arrow" >
            <a class="right">
                <span></span>
            </a>
        </div>
    </div>
</div>

<pre name="code" class="css">.sliderbox{

    padding-top:425px;
    text-align: center;
    height:88px;
    width: 100%;
    position: relative;

}

.monthss{
    position:absolute;
    left: 50%;
    margin-left: -475px;
    width:950px;
    height:88px;
    overflow: hidden;
}


.sliderbox .slidebar{
    position:absolute;
    left: 50%;
    margin-left: -500px;
    width:1000px;
    height:88px;
    overflow: hidden;
}

.sliderbox .slidebar .left_arrow{
    display: inline-block;
    width:25px;
    height:88px;
    background: url("../images/avaliable_leftarrow.png") no-repeat;
    background-position: 0 0;
    float: left;
    position: absolute;
    left: 0;
}

.sliderbox .slidebar .months{
    width:1330px;
    display: inline-block;
    height:88px;
    position: absolute;
    left:0;
    float: left;
    overflow: hidden;
}

.sliderbox .slidebar .months .month {
    display: inline-block;
    float: left;
    height: 88px;
    width: 189px;
    padding-top: 10px;
}

.sliderbox .slidebar .monthss .months .month>span{
    margin-top:5px;
}

.sliderbox .slidebar .month .bigger{
    font-size:30px;
}

.sliderbox .slidebar .avaliable{
    color:#b38d81;
    background-color: #730e0a;
    cursor:pointer;
}

.sliderbox .slidebar .now{
    color:#ffffff;
    background-color: #ce2621;
    cursor:pointer;

}

.sliderbox .slidebar .later{
    color:#615954;
    background-color: #332929;
}

.sliderbox .slidebar .right_arrow{
    display: inline-block;
    position: absolute;
    right:0;
    width:25px;
    height:88px;
    background: url("../images/unavaliable_rightarrow.png") no-repeat;
    background-position: 0 0;
    float: left;
}

.border4, .border5, .border6, .border7{
    background-color: #5c5453;
    width:1px;
    float:left;
    height:88px;
}

.border1, .border2, .border3{
    background-color: #8f3e3b;
    width:1px;
    float: left;
    height:88px;
}

$(document).ready(function () {
    $(".Sep").addClass("now");
    $(".months").css("left","-380px");//两倍每个月份的宽度

    $(".content").html(str[2]);

    $(".left_arrow").mouseover(function() {
        $(".left_arrow").css("background-position", "0 -88px");//一个箭头的高度
    });

    $(".left_arrow").mouseout(function() {
        $(".left_arrow").css("background-position", "0 0");
    });

});

var n = 9;

$(".left_arrow").click(function () {
    if (n == 8) {
        $(".left_arrow").unbind("mouseenter").unbind("mouseleave");
        $(".left_arrow").css("background", "url('../images/unavaliable_leftarrow.png')");
        $(".content").html(str[0]);
    }
    if(n == 7){
        return false;
    }

    if(n==9){
        $(".content").html(str[1]);
    }
    n--;
    $(".months").animate({left: "+=190px"});
    $(".now").prev().prev().addClass("now");
    $(".now").next().next().removeClass("now");
    if (n != 9) {
        $(".right_arrow").css("background", "url('../images/avaliable_rightarrow.png')");

        $(".right_arrow").mouseover(function() {
            $(".right_arrow").css("background-position", "0 -88px");
        });

        $(".right_arrow").mouseout(function() {
            $(".right_arrow").css("background-position", "0 0");
        });
    }
});

$(".right_arrow").click(function () {
    if(n == 8 ){
        $(".right_arrow").unbind("mouseenter").unbind("mouseleave");
        $(".right_arrow").css("background","url('../images/unavaliable_rightarrow.png')");
        $(".content").html(str[2]);
    }
    if(n == 9){
        return false;
    }
    if(n==7){
        $(".content").html(str[1]);
    }
    n++;
    $(".months").animate({left:"-=190px"});
    $(".now").next().next().addClass("now");
    $(".now").prev().prev().removeClass("now");
    if(n!=7){
        $(".left_arrow").css("background","url('../images/avaliable_leftarrow.png')");

        $(".left_arrow").mouseover(function() {
            $(".left_arrow").css("background-position", "0 -88px");
        });

        $(".left_arrow").mouseout(function() {
            $(".left_arrow").css("background-position", "0 0");
        });

    }
});

$(".avaliable").click(function () {

    $(".now").removeClass("now");
    $(this).addClass("now");
    var  n1 = $(".month").index(this);
    var d = (2-n1)*190;
    var distance = d.toString()+'px';
    if(n1==2){
        n = 7;
        $(".left_arrow").unbind("mouseenter").unbind("mouseleave");
        $(".left_arrow").css("background", "url('../images/unavaliable_leftarrow.png')");
    }
    else if(n1==3)
        n = 8;
    else {
        n = 9;
        $(".right_arrow").unbind("mouseenter").unbind("mouseleave");
        $(".right_arrow").css("background","url('../images/unavaliable_rightarrow.png')");
    }

    $(".months").animate({left:distance});
    $(".content").html(str[n1-2]);

    if (n != 9) {
        $(".right_arrow").css("background", "url('../images/avaliable_rightarrow.png')");
        $(".right_arrow").mouseover(function() {
            $(".right_arrow").css("background-position", "0 -88px");
        });

        $(".right_arrow").mouseout(function() {
            $(".right_arrow").css("background-position", "0 0");
        });
    }

    if(n!=7){
        $(".left_arrow").css("background","url('../images/avaliable_leftarrow.png')");

        $(".left_arrow").mouseover(function() {
            $(".left_arrow").css("background-position", "0 -88px");
        });

        $(".left_arrow").mouseout(function() {
            $(".left_arrow").css("background-position", "0 0");
        });
    }

});

好的，那第一个重点就是jQuery的unbind函数对hover事件是无效的！bind一个hover事件是有效的，然而并不能unbind一个hover事件orz。在网上查到了这个坑的解决办法，就是像代码中的那样，绑定的时候用mouseover和mouseout事件，unbind时：unbind（“mouseenter”）.unbind（“mouseleave”）

第二个重点就是：这些月份的第一个外层的div不能设置实际显示出的宽度，这样的话就会出现换行的情况，点击左右箭头时就会出现“跳出来”的感觉，所以将第一个外层的div 也就是months设置成所有月份加一起的宽度，就是190*7=1330px。然而这样就会出现一个问题，就是左右箭头是PNG格式，然而箭头是圆角的，所以月份就会在箭头之外露出一个很尴尬的角，开始以为是解决不了的。后来仔细想了一下和外面那层div遮盖掉多余的月份的原理是一样的，所以又包裹了一个div。。宽度设置成刚好是显示出来的五个月份的宽度。同时要把外层的div的overflow属性设置成hidden（这次一个遗憾就是月份间的分割线不知道为什么不能直接给月份加border来显示，最后只能两个月份之间加一个div然后设置div的背景颜色）。说出来都好简单，但是写的时候真的好麻烦。还有就是如何获取这个条的状态，就是是否左边和右边滑到底，参考了网上的代码，设置一个全局的int变量，每单击一次箭头就对这个变量进行加1或者减1操作，然后当这个变量达到某个值时就可以unbind箭头的事件。

第三个重点就是如何在已经滑到底的时候点击左右箭头不会继续滑动。在变量达到某个值时，在箭头的单击事件的刚开始部分就直接return false。

后来加了需求，就是点任何一个可点的月份，都能自动滑到导航条的中间，这里要获取当前被点击月份的索引，然后算出要移动到中间的距离。（但是后来移动端就没能这样实现，还是把所有avaliable月份的情况都列出来实现的）

然后下面换内容就是一个json数组。

其中还遇到一个坑就是改样式的时候随便设置了一个div的z-index值，结果导致对它的点击事件各种无效。所以就是改CSS属性的时候如果发现没什么效果一定要马上注释掉或者删除，否则也许后面会引发奇怪的问题。

PC端的坑好像就是这些。

移动端：移动端其实最主要的就是把宽度大部分都设置成百分比

1.页面底端的三个分享图标。（又是分享！）
有了之前PC端分享图标的教训，这次。。还是有点坑。
第一次打算从设计师给的PSD中切下来，但是无论怎么切都是会存在两层不同的颜色重叠在一起，很难看。

后来。。研究了许久学姐之前写的页面，发现那行图标是和背景图切在一起的。。然后控制一下a标签的相对位置，让他们刚好在三个图标的位置就可以了。orz

2.移动端的话图片设置成宽度的80%比较合适，不然会比较小。

3.JavaScript遍历数组时，循环结束条件不要设置成i小于固定的一个值
遍历之前用一个变量存储数组的长度，然后将循环结束条件设置为小于这个变量。

如果直接设置为i<array.length的话，每次循环都要获取数组的长度，速度会比较慢。

4.移动端的话 addClass和PC端不太一样。如果新加的类中有和原来类的属性冲突的地方，显示出的属性值是原来类的属性的值，所以要先remove掉原来的类。但是PC端就不是，PC端可以直接addClass就可以覆盖掉原来类的属性。

这次左右滑动导航条其实应该还有可优化的地方，许多地方逻辑都是直接用if来判断的。

整个页面做完总结下来就是。

不和谐的东西的存在一定是有原因的，并且问题都是可以解决的。

设计师的眼睛真的和我的眼睛不一样orz。