自己做個網站,不會前端,不會CSS,怎么辦?就算會PHP和Java等世界最好的語言,如果不會前端和css,也很難做出漂亮的網站來。
今天,冉雷為大家搜集了幾款基于Material Design設計的UI組件庫或框架,可以很好的解決上述問題。
Google I/O 2014 發布的 Material Design 漸漸成為統一 Android Mobile、Android Table、Desktop Chrome 等全平臺設計語言規范,對從業人員意義重大。
一款基于 Material Design 的現代響應式前端框架。
MUI是一個輕量級的CSS框架,遵循Google的Material Design設計方針。
MDUI 是一套用于開發 Material Design 網頁的前端框架。特點如下:
多主題
輕量級
響應式
無依賴
高性能
模塊化
本地化
組件豐富
低學習成本
一個基于Google’s Material Design的react組建框架。喜歡Material design,又喜歡用react的,適合折騰這個框架了。
Material Design Lite 不依賴任何js框架,讓你輕松將網站樣式切換到md設計。
同時基于Foundation UI和material design設計理念的框架。
基于angular框架的material design框架,特點如下:
輕松從0到完成app開發
性能優異
單獨為angular優化
基于Bootstrap 4的material design設計框架。
該框架使用了AngularJS和sass開發。
是Material Design的Vue.js 版本。
顧名思義,又一個Material Design的bootstrap版本。
過去的幾年里,Web開發已經變得非常流行。每年都會發布許多前端框架,Bootstrap一直是最受歡迎的一個,但是,還有許多其他的框架,你可能沒有聽說過,但絕對值得一試。想學的同學可以參加Web前端培訓,快速有效提升自己。
在本文中,我們將介紹10個好用的框架。
Spectre
Spectre是一個現代的、自由的、響應迅速的CSS框架。它提供了優雅的元素、基于flexbox的響應式布局系統以及CSS組件和實用程序,可以使用Sass和Scss編譯器進行修改。它非常輕量級,只有10KB的Gzip,并且支持大多數現代瀏覽器。
Mustard UI
這是一個開源、輕量級的入門級CSS框架。它分為多個模塊,您可以選擇是包含所有模塊,還是只包含所需的模塊。它配備了前端設計所需的所有組件,如flexbox網格、按鈕、表格、表單、卡片等,并且可以通過scss變量進行定制。
Bulma
Bulma是一個基于Flexbox布局模型的免費開源現代CSS框架。它提供了一個簡單的網格系統、反應靈敏的導航條和多功能的媒體對象。Bulma中的每個元素都是首先移動的,并針對小屏幕進行了優化,并且可以使用修改器類和變量輕松定制。在Web前端培訓中,會有很多框架的學習和應用,可以讓你快速掌握前端技能。
UI Kit
這是另一個很棒的CSS和JavaScript前端框架,它有自己的SVG圖標字體和許多組件。UIkit在外觀和框架方面都設計得非常好,具有統一的樣式、易于記憶的API、許多自定義選項和有用的修改器類。
TentCSS
TentCSS是一個簡單易用的框架,提供了構建響應性網站所需的所有基本組件。它非常輕(僅5kb Gzip),遵循BEM標準,并具有用于布局的現代flexbox網格。
MaterializeCSS
這是一個基于材料設計的現代響應前端框架。它的使用非常簡單,特別是對于熟悉其他類似項目(如Bootstrap)的人來說。有一個初學者模板的集合,將幫助您輕松地設計您的網站。
The Zurb Foundation
ZURB基礎框架是建立響應網站和應用程序的另一個流行工具。它附帶了許多完全可定制的模塊化和靈活組件,您可以使用這些組件設計在任何設備上都令人驚嘆的漂亮響應網站。通過Web前端培訓的學習,理論知識+實踐項目,雙管齊下,更有利于學員加深對所學知識的理解和運用,真正做到學以致用,從而將知識內化成自身的能力。
Semantic UI
Semantic是一個前端框架,它使用人性化HTML幫助創建美觀且響應迅速的布局。它高度可定制,有3000多個CSS變量,可以用于自定義主題。語義高度響應,因為它完全是用“em”值構建的。
Base
Base是一個輕量級的、最小的、響應迅速的CSS框架。它構建在最新的Normalize.css之上,并分為獨立的模塊,因此您只能使用所需的模塊。它首先是移動的,在包括IE10+在內的所有現代瀏覽器上都非常有效。
MUI
這是一個小型且響應迅速的框架,遵循谷歌的材料設計指南。它沒有外部依賴項,并且非常輕量級,只有5.4kb的gzip。它提供React支持,通過SASS文件進行定制,并有一個單獨的內聯版本用于設置電子郵件樣式。
這些框架在web開發工作中也會起到不小的作用,掌握好這些框架的運用將會使你的開發工作變得更加高效和穩定。想要盡快學會這些框架的使用,參加Web前端培訓就是一個不錯的方法,可以提高學習效率,在最短的時間內學到最多最有效的知識和技能。
了解更多
本例演示:如何使用 <noframes> 標簽。
<html> <frameset cols="25%,25%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的瀏覽器無法處理框架!</body> </noframes> </frameset> </html>
HTML基礎教程:框架實例大合集
本例演示如何制作含有三份文檔的框架結構,同時將他們混合置于行和列之中。
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>
HTML基礎教程:框架實例大合集
本例演示 noresize 屬性。在本例中,框架是不可調整尺寸的。在框架間的邊框上拖動鼠標,你會發現邊框是無法移動的。
<html> <frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /> </frameset> </html>
HTML基礎教程:框架實例大合集
本例演示如何制作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html" > <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
HTML基礎教程:框架實例大合集
HTML基礎教程:框架實例大合集
HTML基礎教程:框架實例大合集
本例演示如何創建內聯框架(HTML 頁中的框架)。
<html> <body> <iframe wigth="200" height="100" src="/i/eg_landscape.jpg"></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持,iframe 是不可見的。</p> </body> </html>
HTML基礎教程:框架實例大合集
本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個"link.htm"文件內指定的節使用 <a name="C9"> 進行標識。
<html> <frameset cols="20%,80%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/link.html#C9"> </frameset> </html>
HTML基礎教程:框架實例大合集
本例演示兩個框架。左側的導航框架包含了一個鏈接列表,這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。
<html> <frameset cols="200,*"> <frame src="/example/html/content.html"> <frame src="/example/html/link.html" name="showframe"> </frameset> </html>
HTML基礎教程:框架實例大合集
HTML基礎教程:框架實例大合集
希望以上可以解決你們心中的一些疑惑,其中可能會有不對的地方或是需要改進的地方,歡迎留言糾正。感覺還不錯歡迎關注收藏轉載哦
*請認真填寫需求信息,我們會在24小時內與您取得聯系。