【个人主页】搭建个人主页，准备找工作啦

1.首页：添加背景图

2.项目经验：分几个部分进行展示

小游戏、论坛、插件、css3、vue、jQuery mobile、todolist

3.前端技能

4.个人经历

5.左侧信息栏

js部分：

滚轮事件和键盘事件

参考：http://www.ydcss.com/archives/516

WebKit内核，Trident内核 => mousewheel

Gecko内核 => DOMMouseScroll

1、mousewheel

IE6首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向下滚动鼠标滚轮时，wheelDelta是-120的倍数。

2、DOMMouseScroll

Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。与mousewheel事件一样，DOMMouseScroll也被视为鼠标事件，因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中，当向上滚动鼠标滚轮时，这个属性的值是-3的倍数，当向下滚动鼠标滚轮时，这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值，而其他浏览器是负值。

function() {
            $(document).on("mousewheel keydown DOMMouseScroll",
            function(t) {   /*t是传进去的event对象，里面包含wheelDelta等属性，滚轮向上滑其值为120，向下为-120*/
                console.log('t',t);
                if (!e()) {
                    t = t || window.event;
                    var n = t.wheelDelta || -t.detail;
                    0 > n || 40 == t.keyCode ? 3 >= s && s++:(n > 0 || 38 == t.keyCode) && s >= 1 && s--,
                    o()
                }
            })
        } (),

touch事件

参考：http://www.cnblogs.com/yanxuan/p/6160630.html

在移动端页面开发时，常常会用到touch事件，比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性：

　　touches：表示当前跟踪的触摸操作的touch对象的数组。

　　targetTouches：特定于事件目标的Touch对象的数组。

　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性：

　　clientX：触摸目标在视口中的x坐标。

　　clientY：触摸目标在视口中的y坐标。

　　identifier：标识触摸的唯一ID。

　　pageX：触摸目标在页面中的x坐标。

　　pageY：触摸目标在页面中的y坐标。

　　screenX：触摸目标在屏幕中的x坐标。

　　screenY：触摸目标在屏幕中的y坐标。

　　target：触摸的DOM节点目标

css部分

当屏幕宽度小于768px时，调整元素宽高和字体大小的方法

参考网易的做法：http://www.cnblogs.com/lyzg/p/4877277.html

deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：

（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度（在我的项目中取iPhone7 plus的宽度414/100=4.14）：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

（2）布局时，设计图标注的尺寸除以100得到css中的尺寸

某元素高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！

（3）在dom ready以后，通过以下代码设置html的font-size:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

补充说明：采用该方法，视口要如下设置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

根据该方法写出了适用于个人主页的移动端适配方案：

<script type="text/javascript">/*根据js监控页面的窗口大小 然后响应改变所有 font-size的大小*/
        (function () {
            function remSize() {
                let sw = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = Math.floor(sw / 4.14) + 'px';    /*4.14，设计稿的横向分辨率（iPhone7 plus）414/100得来*/
            }
            window.onresize = remSize;/*onresize 事件会在窗口或框架被调整大小时发生*/
            window.onload = remSize;
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
                let sw = document.documentElement.clientWidth;
                var angle = window.screen.orientation.angle || window.orientation;
                if (sw < 769 && (angle === 90 || angle === -90)) {
                    alert("竖屏浏览体验更佳，亦可使用PC");
                }
            });/*移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机旋转角度*/
        })();
    </script>

第二页-项目经验

实现每个project中img、txt、btn等高对齐，因为设置了display:table-cell，所以它们三个只要有一个高度发生变化，其余两个会一起变化，添加display:table-cell之后，子div在父div中实现了垂直居中效果，不过需要注意的是，在IE6和 IE7这样低版本的浏览器中无效。display:table-cell的作用，它可以指定对象作为表格单元格，类同于html标签<td>，也就是说它可以使对象具有表格单元格的属性，添加了display:table-cell属性之后，div 就具有了align属性，于是vertical-align:middle也就生效了，可以实现垂直居中。

.page2 .project {
    display: table;   /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
    height: 100px;
    width: 450px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 1px 3px 3px 0 #b9b9b9;
    border-radius: 2px;
    opacity: 0;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px
}

.page2 .project .pro-img {
    display: table-cell;     /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    vertical-align: middle
}
.page2 .project .pro-txt {
    display: table-cell;
    text-align: left;
    padding: 0 10px
}
.page2 .project .pro-btn {
    display: table-cell;
    vertical-align: middle
}

第四页-个人经历

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：

1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

line-height:2;行高是2倍的文字大小，均以相应的字体为基准。 

display:list-item为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点。

.page4 .history .intro>dd {
    display: list-item;   /*此元素会作为列表显示。*/
    list-style-type: circle   /*空心圆*/
}