【摘 要】根據(jù)個人信息設計的一個個人的網(wǎng)站，類似于個人blog。方便了他人對自己的信息了解，以及個人作品的展示。網(wǎng)站基于Bootstrap 3.4.6版本，新浪云服務器，應用了Bootstrap的十二柵格系統(tǒng)，所以網(wǎng)站能夠自適應于各類型設備的使用。能夠很方便的讓他人了解自己?，F(xiàn)在流行的個人形象設計已經(jīng)成為一種龐大市場的需求，像凡客網(wǎng)站的網(wǎng)站設計就是很好的一種社會趨勢。

【關鍵詞】Bootstrap Canvas 微信小程序 Rem布局

一、引言

互聯(lián)網(wǎng)是社會發(fā)展的趨勢，很多人已經(jīng)意識到網(wǎng)絡的強大生命力和他在未來將處于的重要地位。他們鉆研并且努力進入到這一個新的空間，新的領域?；ヂ?lián)網(wǎng)發(fā)展為人人都有話語權，人人都是中心?；ヂ?lián)網(wǎng)是一個互動性極強的平臺。本論文中，將前端技術Bootstrap的原理以及方法應用到整個網(wǎng)站，并對其進行移動端的適配，提出了解決問題的具體方法。個人網(wǎng)站對于前端開發(fā)人員能夠更好的展示自己，能讓人更快的了解自己所掌握的技術和學習能力。個人網(wǎng)站能夠更突出的自己的優(yōu)點，能夠發(fā)揮自己的空間，設計出屬于自己的網(wǎng)站。在網(wǎng)站里可以展現(xiàn)自己平時所做的demo，以及自己學習的內容?；趥€人網(wǎng)站的實現(xiàn)，我們可以在此基礎上更新出一套自己的網(wǎng)站系統(tǒng)。并且個人網(wǎng)站不限制訪問權限，能夠在他人學習的時候讓別人提出自己的想法，更夠豐富別人的同時，增強自己的能力。Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。Internet飛速發(fā)展使得網(wǎng)站不再是只有企業(yè)和公司才能擁有，互聯(lián)網(wǎng)讓人們是人們快速獲取信息的重要渠道，在人們的各個領域都有著重要的作用。因此網(wǎng)站建設應用的地位顯著提高，每個人都可以擁有自己的個人網(wǎng)站，創(chuàng)建一個體現(xiàn)自我風格和個人特色的網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。

二、網(wǎng)站開發(fā)環(huán)境

在進行網(wǎng)站開發(fā)之前，由于個人對前端技術比較熱愛，對于后端技術了解不是也特別多，所以在服務器方面采用的是新浪云的免費服務器以及它的二級域名。前端主要采用Bootstrap技術，在個人作品方面采用了angular 微信小程序等技術支持。通過使用sublime開發(fā)工具開發(fā)界面，對頁面的整體效果的實現(xiàn)，在瀏覽器的控制臺進行修改。使用firework進行圖片美工與設計。測試時用wamp模擬服務器測試，最終發(fā)布在新浪云服務器。微信小程序的開發(fā)在微信開發(fā)工具上編寫。

三、個人網(wǎng)站整體要求

1.功能要求

第一，頁面簡介明了，采用扁平化設計理念，給人較好的視覺印象。

第二，用戶瀏覽、操作便捷，迅速。

2.系統(tǒng)系能要求

在程序設計時，盡量優(yōu)化代碼，降低服務器的訪問時間，采用緩存機制，使得頁面加載更迅速，降低處理時間是比較重要的問題。

四、網(wǎng)站的分析與設計

第一，基于Bootstrap技術的個人網(wǎng)站，主要展示自己的個人信息，主要分為兩部分：一是個人信息的展示，具體的個人信息。二是個人的作品展示。

第二，頁面的實現(xiàn)。一是index.html為網(wǎng)站的首頁，展現(xiàn)個人的信息頁，以及個人作品的展示區(qū)，扁平化的設計能夠讓人更清晰的了解到自己，去除了繁瑣的頁面設計，采用扁平化設計突出個人特色。二是myresume/index.html為個人簡歷頁面，該網(wǎng)頁采用rem布局，適用于各類型的手機，解決了各內核瀏覽器的兼容性問題，涉及了一些css3的動畫操作，讓個人簡歷能夠有個人特色，更充分的展現(xiàn)了自己的能力.rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位?？吹絩em大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算三是lovefish/index.html為小游戲頁面，該網(wǎng)頁采用canvas技術，實現(xiàn)頁面效果，讓頁面看起來更豐富，通過事件控制魚的游動以及小魚的跟隨，采用定時器控制游戲的時間。HTML5元素用于圖形的繪制，通過腳本（通常是javascript）來完成。標簽只是圖形容器，您必須使用腳本來繪制圖形。你可以通過多種方法使用canvas繪制路徑，盒、圓、字符已經(jīng)添加圖像。四是angular/index.html#/index為angular 路由練習，采用angular技術實現(xiàn)單頁面應用，以及ajax的jsonp解決跨域問題。實現(xiàn)了頁面的局部刷新以及動態(tài)的數(shù)據(jù)交互。頁面整體采用彈性盒布局，適用于移動端的布局。Angular.js是一個JavaScript框架。它可通過