【我的主頁】搭建我的主頁，準備找工做啦

1.首頁：添加背景圖

2.項目經驗：分幾個部分進行展現

小遊戲、論壇、插件、css三、vue、jQuery mobile、todolist

3.前端技能

4.我的經歷

5.左側信息欄

js部分：

滾輪事件和鍵盤事件

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

WebKit內核，Trident內核 => mousewheel

Gecko內核 => DOMMouseScroll

一、mousewheel

IE6首先實現了mousewheel事件。此後，Opera、Chrome和Safari也都實現了這個事件。當用戶經過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（不管向上仍是向下），就會觸發mousewheel事件。這個事件能夠在任何元素上面觸發，最終會冒泡到document（IE8）或window（IE九、Opera、Chrome及Safari）對象。與mousewheel事件對應的event對象包含鼠標事件的全部標準信息外，還包含一個特殊的wheelDelta屬性。當用戶向上滾動鼠標滾輪時，wheelDelta是120的倍數；當用戶向下滾動鼠標滾輪時，wheelDelta是-120的倍數。

二、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   /*空心圓*/
}