怎么去設計好看Web前端_Web前端設計有哪些技巧

　　web設計排版多種多樣，如何更好的排版、設計出更符合美學的設計了?下面由學習啦小編為大家整理的Web前端設計技巧，希望大家喜歡!

　　Web前端設計技巧

　　一、強調字體

　　字體的設計與強調在網頁當中相當重要，合適的排版和適當的字體強調，不僅可以讓用戶快速的抓住網站中的重點，同樣可以增強網站對用戶的吸引力

　　二、單頁面設計

　　隨著互聯網的發展，用戶的習慣更傾向于鼠標滾輪。在用戶的體驗和習慣方面來講，與其在多個頁面中來回點擊查看，不如直接滾輪來的方便。

　　三、網頁色塊設計

　　隨著互聯網的發展和H5的出現，網站網頁的排版方式越來越傾向于簡潔大方，這最根本的原因在于：用戶的視覺和心理。不同的色塊放在一起形成強烈的對比，要么以純文字形式，要么以方形照片配上文字形式，這兩者在一定程度上刺激了用戶的視覺興趣，進而使用戶繼續探索。

　　四、背景

　　網頁以什么樣的方式作為背景呢?純色?漸變?圖片?這三種都是可以的，但以商業化為目的展示，用照片作為網站網頁的背景，不僅可以達到展示的目的，而且還可以達到強烈的視覺表達效果。這種設計方式在時尚、品牌和旅游等行業最為常見。

　　五、圖片

　　簡約、設計時尚、顏色對比突出，表達清楚、突出目的的大圖，是很多網站開發者所追捧的。同樣與枯燥的文字相比，用戶也更愿意繼續觀賞這樣的網站。

　　六、響應式設計

　　隨著手機和移動端設備廣泛的被人們使用，響應式設計成為目前網站開發比不可少的內容。不僅能節省開發者的成本和時間，更能方便用戶在不同尺寸的設備上暢通無阻的瀏覽你的網站。

　　七、視差滾動

　　讓多層背景以不同的速度移動，形成運動視差的3D效果，這樣的效果以后很可能會在H5的網站中更加常見和流行

　　Web前端知識技巧

　　1、函數原型鏈

　　Javascript雖然沒有繼承概念，但Javascript在函數Function對象中建立了原型對象prototype，并以Function對象為主線，從上至下，在內部構建了一條原型鏈。

　　簡單來說就是建立了變量查找機制，當訪問一個對象的屬性時，先查找對象本身是否存在，如果不存在就去該對象所在的原型連上去找，直到Object對象為止，如果都沒有找到該屬性才會返回undefined。

　　因此我們經常會利用函數的原型機制來實現JS繼承。關于函數原型鏈可參考博客：JS原型對象和原型鏈

　　2、函數作用域

　　函數作用域就是變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。在JS中沒有會塊級作用域，只有函數作用域，因此JS中還存在著另外一種怪異現象，那就是變量提升。關于作用域的介紹請參考博客：函數的作用域和作用域鏈

　　3、函數指針 this

　　this 存在于函數中，它指向的是該函數在運行時被調用的那個對象。在實際項目中，遇到this的坑比較多，因此需要對this作深入的理解。

　　Function對象還提供了call、apply和bind等方法來改變函數的this指向，其中call和apply主動執行函數，bind一般在事件回調中使用，而call和apply的區別只是參數的傳

　　遞方式不同。關于call,apply和bind的用戶請參考博客：詳解JS的call,apply和bind

　　4、構造函數 new

　　JS中的函數即可以是構造函數又可以當作普通函數來調用，當使用new來創建對象時，對應的函數就是構造函數，通過對象來調用時就是普通函數。

　　普通函數的創建有：顯式聲明、匿名定義、new Function() 等三種方式。

　　當通過new來創建一個新對象時，JS底層將新對象的原型鏈指向了構造函數的原型對象，于是就在新對象和函數對象之間建立了一條原型鏈，通過新對象可以訪問到函數對象原型prototype中的方法和屬性。new的詳細介紹請參考博客：理解JS中的new運算符

　　5、閉包

　　閉包其實是一個主動執行的代碼塊，這個代碼塊的特殊之處是可以永久保存局部變量，但又不污染全局變量，可以形成一個獨立的執行過程，因此我們經常用閉包來定義組件。關于閉包的介紹請參考：干貨分享：讓你分分鐘學會JS閉包

　　6、單線程和異步隊列

　　setTimeout和setInterval是JS內置的兩個定時器，使用很簡單，但這兩個方法背后的原理卻不簡單。

　　我們知道，JS是單線程語言，在瀏覽器中，當JS代碼被加載時，瀏覽器會為其分配一個主線程來執行任務(函數)，主線程會形成一個全局執行環境，執行環境采用棧的方式將待執行任務按順序依次來執行。

　　但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回調等，為了保證其他任務的執行效率不被影響，JS在執行環境中維護了一個異步隊列(也叫工作線程)，并將這些任務放入隊列中進行等待，這些任務的執行時機并不確定，只有當主線程的任務執行完成以后，才會去檢查異步隊列中的任務是否需要開始執行。這就是為什么setTimeout(fn,0) 始終要等到最后執行的原因。關于單線程和異步隊列問題請參考：setTimeout(0)

　　7、異步通訊 Ajax技術

　　Ajax是瀏覽器專門用來和服務器進行交互的異步通訊技術，其核心對象是XMLHttpRequest,通過該對象可以創建一個Ajax請求。為了防止XSS攻擊，瀏覽器對Ajax做了限制，不允許Ajax跨域請求服務器,就是只能訪問當前域名下的url。

　　當然，如果確信你的站點不存在跨域的風險，可以在服務端主動開啟跨域請求。 也可以直接通過CORS或JSONP來實現。

　　JSONP是利用腳本(script)跨域能力來模擬Ajax請求。

　　CORS是一個W3C標準，全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 關于CORS的介紹請參考：跨域資源共享 CORS 詳解

　　8、DOM對象 document

　　document對象里保存著整個web頁面dom結構，在頁面上所有的元素最終都會映射為一個dom對象。 document也提供了很多api來查找特定的dom對象，比如getElementById,querySelector等等。

　　9、事件系統 Event

　　事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發展到移動端的 觸摸事件(touch) 和 手勢事件(guesture)

　　由于DOM結構可能會多層嵌套，因此也衍生出了兩種事件流：事件捕獲和事件冒泡，后者最常用。利用事件冒泡機制可以實現很多功能，比如頁面點擊統計。關于兩種事件流的介紹請參考：事件冒泡和捕獲

　　除此之外，在頁面初始化、滾動、隱藏、返回等操作時分別內置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕獲這些事件，需要通過addEventLisener/attachEvent來進行綁定。

　　10、全局對象 window

　　在JS中，當一段JS代碼在瀏覽器中被加載執行，JS引擎會在內存中構建一個全局執行環境，執行環境的作用是保證所有的函數能按照正確的順序被執行，而window對象則是這個執行環境中的一個全局對象，window對象中內置了很多操作api和對象，document對象就是其中一個。關于JS執行環境的介紹請參考博客：深入理解JS執行細節

　　Web前端開發的職責是什么

　　1、使用Div+css并結合Javascript負責產品的前端開發和頁面制作;

　　2、熟悉W3C標準和各主流瀏覽器在前端開發中的差異，能熟練運用DIV+CSS，提供針對不同瀏覽器的前端頁面解決方案;

　　3、負責相關產品的需求以及前端程序的實現，提供合理的前端架構;

　　4、與產品、后臺開發人員保持良好溝通，能快速理解、消化各方需求，并落實為具體的開發工作;

　　5、了解服務器端的相關工作，在交互體驗、產品設計等方面有自己的見解。