專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)是既復(fù)雜又耗時(shí)的。它需要HTML和CSS框架的完美結(jié)合。這些框架不僅可以為設(shè)計(jì)方案增加特定的功能，還可以大大地節(jié)省時(shí)間和精力。
高效的框架不僅是網(wǎng)站設(shè)計(jì)的基礎(chǔ)，它提供的各種豐富多彩的功能，還提高整體的功能和性能。一個(gè)網(wǎng)站的外觀和設(shè)計(jì)完全可以通過(guò)一些完美和可靠的工具而徹底改頭換面。現(xiàn)在，越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)師和編輯人員選擇使用CSS框架來(lái)創(chuàng)建網(wǎng)站。
所以，如果你正在尋找一些高效的HTML和CSS框架，那么不妨繼續(xù)看下去——眾里尋他千百度，驀然回首，那人卻在燈火闌珊處。
 
1）CSS框架——Gumby

Gumby是最好的框架之一，配備了各種有用的和有效的功能。它預(yù)置的設(shè)計(jì)和通用的界面元素，有助于我們創(chuàng)建完美的網(wǎng)站。Gumby框架還允許根據(jù)要求定制網(wǎng)格。
 
官方網(wǎng)站：http://gumbyframework.com/

 
2）CSS框架——Semantic UI框架

Semantic UI也是一個(gè)非常有用的網(wǎng)頁(yè)設(shè)計(jì)框架。通過(guò)允許用戶創(chuàng)建界面共享語(yǔ)言來(lái)授權(quán)給設(shè)計(jì)師。各種功能和3D動(dòng)畫也是不可小覷的功能。相比于其他框架，它更容易使用。
 
官方網(wǎng)站：http://semantic-ui.com/

 
3）CSS框架——YAML框架

下面要說(shuō)的是YAML。這是一個(gè)設(shè)計(jì)靈活，方便和響應(yīng)網(wǎng)站的理想工具。它提供了一系列有效的功能。同時(shí)，它還帶有Ajax Builder，可以保證基于YAML的CSS布局的可視化開(kāi)發(fā)。
 
官方網(wǎng)站：http://www.yaml.de/

 
4）CSS框架——blueprint

在網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中，blueprint框架也是一個(gè)不錯(cuò)的助手。它提供了一個(gè)堅(jiān)實(shí)的基礎(chǔ)，可以用來(lái)為你的項(xiàng)目打造漂亮的表單、樣式表和易于使用的網(wǎng)格和排版。這是用來(lái)打造復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)最好的框架之一。
 
官方網(wǎng)站：http://www.blueprintcss.org/

 
5）CSS框架——Toast

Toast是一種可靠的CSS框架，可以使得布局更簡(jiǎn)單，并允許用戶輕松地添加填充物和邊框。這是互聯(lián)網(wǎng)上最好最簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)框架之一。
 
官方網(wǎng)站：http://daneden.github.io/Toast//

 
6）HTML和CSS框架——Bootstrap

Bootstrap是現(xiàn)在網(wǎng)上最流行的HTML、CSS和JS框架。這工具非常有用，被大量的網(wǎng)頁(yè)設(shè)計(jì)師用于為移動(dòng)和其他設(shè)備開(kāi)發(fā)響應(yīng)式的、功能豐富的網(wǎng)站。
官方網(wǎng)站：http://getbootstrap.com/

 
7）Web框架——Kube

Kube框架也是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中的重要組成部分。它是一個(gè)自適應(yīng)和響應(yīng)式的工具，可用于支持網(wǎng)站設(shè)計(jì)。它有效的功能和可靠的性能有助于我們快速輕松地創(chuàng)建網(wǎng)站。
官方網(wǎng)站：http://imperavi.com/kube/

 
8）CSS框架——Columnal

columnal框架是一個(gè)有效的CSS網(wǎng)格系統(tǒng)，并有少許的自定義代碼。這是一個(gè)彈性網(wǎng)格，為方便快捷的網(wǎng)頁(yè)設(shè)計(jì)提供了特殊功能。因此，如果你想高效的網(wǎng)頁(yè)設(shè)計(jì)結(jié)果，這個(gè)框架是最好最可靠的選擇。
 
官方網(wǎng)站：http://www.columnal.com/

 
9）CSS框架——Pure

還有一種高效的網(wǎng)頁(yè)設(shè)計(jì)框架是Pure。它擁有一系列小型的，響應(yīng)式的CSS模塊，幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中都能派上用場(chǎng)。
 
官方網(wǎng)站：http://purecss.io/

 
10）HTML/ CSS框架——Clank

Clank是一款用于手機(jī)和平板電腦app的HTML/ CSS框架。它使用Saas作為CSS的預(yù)處理器，來(lái)達(dá)到為移動(dòng)和平板設(shè)備快速開(kāi)發(fā)的目的。
 
官方網(wǎng)站：http://getclank.com/

 
11）HTML5和CSS3——52Frameworks

這也是一款非常棒的HTML5和CSS3框架。一種全新的HTML5驗(yàn)證的表單框架（通過(guò)JavaScript）。
官方網(wǎng)站：http://www.52framework.com/

 
12）HTML5框架 – Montagejs

MontageJS是一款前端的HTML5框架，支持快速創(chuàng)建單頁(yè)應(yīng)用程序。MontageJS使用的是經(jīng)過(guò)時(shí)間考驗(yàn)的設(shè)計(jì)模式和軟件規(guī)則，允許用戶為自己的項(xiàng)目輕松創(chuàng)建模塊化的架構(gòu)，從而提供高品質(zhì)的用戶體驗(yàn)。
 
官方網(wǎng)站：http://montagestudio.com/montagejs/

 
13）HTML5 Boilerplate

HTML5有助于快速創(chuàng)建穩(wěn)定和適宜的Web應(yīng)用程序和網(wǎng)站。
官方網(wǎng)站：http://html5boilerplate.com/

 
14）HTML Kickstart

HTML Kickstart提供了HTML5、CSS和JS模塊，用于快速出品網(wǎng)站。
官方網(wǎng)站：http://www.99lime.com/elements/

15）AngularJS

AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語(yǔ)言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。所以我做了一些工作（你也可以覺(jué)得是小花招）來(lái)讓瀏覽器做我想要的事。

通常，我們是通過(guò)以下技術(shù)來(lái)解決靜態(tài)網(wǎng)頁(yè)技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足：
類庫(kù) - 類庫(kù)是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來(lái)決定何時(shí)使用類庫(kù)。類庫(kù)有：jQuery等
框架 - 框架是一種特殊的、已經(jīng)實(shí)現(xiàn)了的WEB應(yīng)用，你只需要對(duì)它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它來(lái)根據(jù)具體的應(yīng)用邏輯來(lái)調(diào)用你的代碼?？蚣苡校簁nockout、sproutcore等。
AngularJS使用了不同的方法，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過(guò)使用我們稱為標(biāo)識(shí)符(directives)的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語(yǔ)法。例如：
使用雙大括號(hào){{}}語(yǔ)法進(jìn)行數(shù)據(jù)綁定；
使用DOM控制結(jié)構(gòu)來(lái)實(shí)現(xiàn)迭代或者隱藏DOM片段；
支持表單和表單的驗(yàn)證；
能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上；
能將HTML分組成可重用的組件。

官方網(wǎng)站：https://angularjs.org/

最新評(píng)論