當前位置:首頁 » 網頁前端 » 響應式web開發項目12
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

響應式web開發項目12

發布時間: 2022-07-08 09:19:42

⑴ 如何用html5構建移動端的webapp

H5e教育html5開發為您解答:
移動web在當今的發展速度是一日千里,作為移動領域的門外漢,在這段時間的接觸後,發現前端開發這一塊做一個小小的總結。
1.四大瀏覽器內核
1.Trident (IE瀏覽器) :因為在早期IE佔有大量的市場份額,所以以前有很多網頁是根據這個Trident的標准來編寫的,但是實際上這個內核對真正的網頁標准支持不是很好,同時存在許多安全Bug。
2.Gecko:( FireFox )優點就是功能強大、豐富,可以支持很多復雜網頁效果和瀏覽器擴展介面,缺點是消耗很多的資源,比如內存。
3.Webkit: ( Chrome/ Safari / UC )優點就是Webkit擁有清晰的源碼結構、極快的渲染速度,缺點是對網頁代碼的兼容性較低,會使一些編寫不標準的網頁無法正確顯示。
4.Presto: ( 歐朋 ) Presto內核被稱為公認的瀏覽網頁速度最快的內核,同時也是處理JS腳本最兼容的內核,能在Windows、Mac及Linux操作系統下完美運行。
移動端開發主要對象是手持設備,其中絕大部分是IOS和Android系統,基於Webkit內核,可使用Chrome瀏覽器調試即可。
2.手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端,競爭也越來越激烈。目前國內市場主流的手機瀏覽器:UC、網路、歐朋、QQ、海豚、safari、Chrome,這些瀏覽器都是基於webkit內核的,兼容性方面不存在問題,同時對html5和css3的支持很好,所以,大膽地應用html5和css3技術吧。
在開始編寫webapp時,前端工程師使用HTML5,而放棄HTML4,因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗,可以減少開發者很多的工作量,當然了你決定使用HTML5前,一定要對此非常熟悉,要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽,定義導航條或選項卡可以直接使用nav標簽等等。
3.終端解析度
手機解析度比PC解析度要龐雜得多,各種解析度有木有?大小差距那麼大有木有?這在一定程度上給頁面製作帶來了不小的麻煩。所以針對這樣的因素,必須有充分的考慮。考慮到瀏覽器自適應,需要設計和製作完成各種不同的方法。
1) 市場上主流手機生產商的產品解析度。經過調研發現,目前主流的手機解析度為:480*800像素、320*480像素,而1280*720像素(720P)會是接下來的趨勢。這些都是很粗略的統計,要有精確的數據需要花費不少的精力,那是數據分析人員的工作。
2) 項目目標群所持設備的解析度。項目目標群即用戶,用戶擁有什麼樣的手機解析度,從一定程度上來說比第一點來得更加重要,它決定著項目開發的方向。
4.響應式web開發
在編寫CSS時,我不建議前端工程師把容器(不管是外層容器還是內層)的寬度定死。為達到適配各種手持設備,我建議前端工程師使用自適應布局模式(支付 寶 採用了自適應布局模式),因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示,你無需再次考慮設備的解析度。
響應式web開發不是一項開創性的技術變革,簡單地說,響應式web設計採用了媒體查詢、流式布局、液態圖片三項技術,把它們組合在一起來製作頁面,使得頁面不只在傳統桌面,在平板電腦和手機上,各種不同的解析度都能夠完美顯示。而要做到這點,我覺得不難,請繼續往下:
1) 准備工作:
a) 插件安裝:window resize。您可以通過下載安裝谷歌瀏覽器插件,安裝成功後,當您調整瀏覽器窗口時,在瀏覽器右下角會有灰度提示當前窗口和類似於手機視圖的大小提示。
b) 編輯器安裝:Hbulder或Webstorm
c) 弄清視圖和屏幕的區別。視圖是瀏覽器的內容顯示區域,屏幕是設備的物理顯示區域。比如視圖寬度我們一般用width表示,而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集 。這里有很多響應式Web設計的網站,供您參考和學習。
2) 征途ING:
e) 響應式web設計之媒體查詢:
為了減少http請求,我想在css樣式表裡進行媒體查詢會是個不錯的選擇,而不是在頁面head部分使用link進行載入。樣式表裡的媒體查詢格式為:
@media screen and (max-width:960px){}
大括弧內部書寫樣式。該語句相當於判斷語句,有兩個條件,一個是視口寬度最大不超過960px,screen代表顯示屏,這兩個條件都具備了,就調用大括弧內的樣式。
f) 響應式web設計之流式布局:
流式布局以百分比進行布局。最重要是時刻關注元素的父級層,所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結合,形成平滑的布局變 化跳轉效果。一般而言,media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片:
要實現液態圖片,只需加入如下代碼:img{max-width:100%;}
web移動頭部書寫

1、首先我們來看看webkit內核中的一些私有的meta標簽,這些meta標簽在開發webapp時起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個meta標簽表示:強制讓文檔的寬度與設備的寬度保持1:1,並且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;
<meta content="yes」 name=" apple-mobile-web-app-capable" />
meta標簽是iphone設備中的safari私有meta標簽,它表示:允許全屏模式瀏覽;
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta標簽也是iphone的私有標簽,它指定的iphone中safari頂端的狀態條的樣式;
<meta content="telephone=no" name="format-detection" />
meta標簽表示:告訴設備忽略將頁面中的數字識別為電話號碼

⑵ 前端開發和web開發有什麼區別

web開發主要進行網站開發,優化,完善的工作。網頁製作是Web1.0時代的產物,那時網站的主要內容都是靜態的,用戶使用網站的行為也以瀏覽為主。前端開發一般指網頁開發,學好CSS是網頁外觀的重要一點,CSS可以幫助把網頁外觀做得更加美觀。學習JavaScript的基本語法,以及如何使用JavaScript編程將會提高開發人員的個人技能。了解Unix和Linux的基本知識雖然這兩點很基礎,但是開發人員了解Unix和Linux的基本知識是有益無害的。了解Web伺服器當你對Apache的基本配置,htaccess配置技巧有一些掌握的話,將來必定受益,而且這方面的知識學起來也相對容易。學習Java、DOM、BOM等用建立開發基礎。學習 photoshop和Axure等軟體應用,完成頁面UI設計。也要認識一下NodeJS和PHP加上資料庫等這樣的後端語言,方便前後端開發配合;學習 HTML5、CSS3、響應式頁面布局、微網站製作等開發移動互聯網的應用。像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發必學的高級技術。東時專注於全棧工程師的培養打造,強化了響應式web應用開發,微信公眾平台開發,跨平台混合應用開發,融入實戰項目開發,並且增加了企業常用技術、全棧開發技術

⑶ web前端開發都包括哪些技術

1、學會HTML

HTML是網頁內容的載體內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。要熟練掌握div、table、ul li 、p、span等這些標簽,這些都是最常用的。

2、學習CSS(Cascading Style Sheets)—樣式。

一般看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,

稱之為「css樣式」,CSS要熟練掌握float、position、width、height,以及對於的最大最小、會使用百分百、overflow、margin、padding,標題字體、顏色變化,或為標題加入背景圖片、邊框等等,這些都是跟布局有關系的樣式,必須要掌握的。

3、JS(java)—— 行為

java是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這么理解,有動畫的,有交互的一般都是用Java來實現的。

4、學習jquery

jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼.其他的一樣網路就夠了。

5、最好會點後台語言,比如java、php,因為前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的, 這樣節約時間,也可以讓前端代碼更規范.不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更麻煩了。

⑷ H5開發和web前端開發有啥區別啊

在網路上,經常看見有同學在提問,H5前端與Web前端的區別。今天我們就來好好談一下,他們之間究竟哪裡不同?
1.開發頁面時,主要使用的技術不同。Web前端在開發互動式頁面時,主流的前端技術都會用到,像HTML、CSS、JavaScript、HTML 5、jQuery、JSon
這些最基礎的技術都會涉及到。H5前端在開發頁面時,大部分是通過HTML語言來設計頁面。
2.涵蓋范圍不同。上面已經提到,Web前端開發會使用到當下主流的前端技術及框架。而H5前端是主要通過HTML標記語言來進行開發。我們也可以說H5前端是涵蓋在Web前端開發裡面。
實際上,在現實生活中,我們並沒有把這兩者分的這么清楚。因為在真正的項目開發過程中,會涵蓋到前端各種主流的技術。所以,大家只需要明白H5前端是包含在Web前端中的就足夠了。

⑸ web應用系統開發

1.漸進式Web應用程序(PWA)

通過利用技術進步參與開發移動站點和本機應用程序的企業可以從漸進式Web應用程序中受益。到目前為止,這是2019年最熱門的Web開發趨勢。它鼓勵萬維網為用戶提供更好的瀏覽體驗。

漸進式Web應用程序是一般的Web應用程序,在用戶看來像移動應用程序,但實際上它們是行為類似於移動應用程序的網頁和網站。PWA致力於為所有設備上所有平台的用戶提供類似本機的體驗。

根據最近的一項研究,就互聯網使用和網站瀏覽而言,移動技術在其他設備上占據主導地位。不僅如此,使用移動應用程序和移動瀏覽器之間的差距還很大。可以估算一下,我們可以說移動應用程序佔用戶在其小工具上花費的總時間的70%以上。

實施PWA的一些知名公司包括阿里巴巴,Twitter,維珍美國航空,福布斯等。使用PWA的顯著優勢是,您的品牌對於具有更強身份的受眾更加可見。PWA中使用的流行技術是Angular,Polymer和React。

2.人工智慧與機器人

如您所知,企業跨不同時區工作並在各個大洲提供代表,這使得客戶支持服務既復雜又昂貴,尤其是考慮到24x7模式時。但是,隨著最近的發展,企業已轉向自動化的即時客戶端支持。

你們大多數人可能已經發現,聊天機器人可以使用人工智慧和機器學習的概念。在未來的幾年中,聊天機器人和機器學習的概念將比以往更加全面,尤其是對於Web設計和開發行業。

有多項調查表明,聊天機器人用於為客戶查詢提供快速響應和解決方案。AI執行人類的認知功能,例如學習,分析信息,收集數據,理解情緒以及解決具有挑戰性的問題的能力,這使聊天機器人成為Web開發的完美補充。

Facebook,Microsoft,Twitter,Google和Amazon等主要供應商都在人工智慧以及機器學習方面進行了大量投資。以下可用於為您的網站構建機器人的技術包括Facebook Bot Engine,Microsoft Bot Framework和Dialog flow。

3.加速的移動頁面(AMP)

Google不斷採用新技術來改善用戶的移動瀏覽體驗。Google在2015年向公眾推出了加速的移動頁面項目,該項目現已發展成為自己的新技術。

AWP的目的是減少網頁的載入時間或構建可在所有設備上快速載入且完美運行的網站。AMP頁面的載入時間被認為是兩秒鍾,而常規網頁可能需要長達22秒的載入時間。

與標准網頁相比,加速的網頁具有明顯的優勢,因為當您的網頁載入速度更快時,用戶將很高興瀏覽您的網站。此外,它將有助於提高您的Web應用程序的搜索引擎排名。

要將AMP技術引入您的網站,您將必須使用AMP HTML開放源代碼框架。Google首次提出這個概念時,就提供了有關如何構建AMP網頁的詳細文檔。

4.單頁申請

單頁應用程序完全基於JavaScript,是可在所有設備上正常運行的Web應用程序。它們不僅可以提高網站性能,還可以通過使用JavaScript載入所有內容來消除重新載入頁面的需要。

大多數公司使用單頁應用程序,因為與載入多頁相關的額外等待時間。誠然,與多頁Web應用程序相比,該頁面可能需要花費更多的時間來載入,但是,如果考慮到用戶在網站上的整個旅程的總時間,那麼放棄渲染多個頁面所節省的時間就變得很重要。這也使構建響應式網站變得更加容易。

SPA的示例包括Gmail,Facebook和GitHub。SPA中使用的技術包括React和Angular框架,使其成為混合應用程序的理想選擇。

5.語音搜索優化

語音搜索已經對Web開發產生了重大影響,使其成為2019年成功的趨勢之一,因此我們簡直不能忽略它。根據Gartner的報告,由於智能揚聲器的興起,到2020年,將有20%以上的搜索完成而無需在屏幕上鍵入任何內容。

即使在2019年,我們也會獲得帶有Google助手按鈕的設備,從而使用戶更輕松地在其設備上打開語音識別。因此,語音搜索在Web開發中達到頂峰還為時不遠。到2020年,我們可以假設英國的語音商務銷售額可以增長到50億美元,在美國達到400億美元。

考慮到多個研究報告和市場的實際情況,我們可以說語音搜索優化是不斷增長的Web開發趨勢之一,不容忽視。有可能,它將盡快成為您的SEO或技術策略的一部分。

要對您的站點實施語音搜索優化,可以使用Web搜索API,該API分為兩個部分-語音識別和語音合成。語音識別使您的網站能夠識別用戶的聲音,然後響應他們的查詢,而語音合成使腳本能夠讀取文本內容。

6.運動界面

Motion UI是為互動式Web設計提供動態圖形和動畫的東西。簡而言之,通過提供優雅的界面,即使使用簡約的網站,它也可以使您的Web應用程序設計與眾不同。而且,如果您進行適當的研究和實施,它可以為您的網站的轉化率帶來奇跡。

Motion UI是2019年最好的網路趨勢之一,因為它為您提供了一種吸引訪問者注意力的簡單解決方案。使用Motion UI庫,您可以合並動畫圖表,背景動畫,懸停和醒目的標題。

使用Motion UI元素不僅可以使您的網站脫穎而出,還可以通過鼓勵積極的用戶互動和改善網站可用性來增強用戶參與度。對於開發人員來說,這是一個額外的優勢,因為他們有多種選擇來製作功能強大的出色站點。

7.自動化測試

我們知道自動化測試已經存在了幾年,但是其中的最新創新使其再次進入了趨勢列表。從單元測試到Web應用程序的跨瀏覽器測試,Web開發測試中發生了許多變化。例如,以前您必須在系統上設置一個環境來執行Web應用程序的測試,但是現在不一樣了。

市場上提供了用於Web應用程序測試的多種擴展程序和API,使開發人員可以輕松地測試其網站。例如,Chrome,WordPress擴展程序和Screenshot API附帶的LambdaTest,使用戶無需編寫任何外部腳本即可測試其網頁。

最大,最受信任的自動化測試平台是LambdaTest,BrowserStack或跨瀏覽器測試,甚至一些大型企業都在使用它們。

8. JavaScript

JavaScript是最流行的編程語言之一,隨著時間的推移不斷發展,並為開發人員提供了新的功能。JavaScript的高級框架,設計和庫已經證明,它在市場上可以提供很多東西。

這就是為什麼它仍處於Web開發的十大趨勢之列的原因。曾經有一段時間人們因為JavaScript與某些瀏覽器不兼容而放棄使用JavaScript並改用純HTML和CSS。但是,隨著對JS的瀏覽器支持的趕超,越來越多的Web開發人員正在使用基於JS的框架和庫來構建其網站。

JavaScript用於開發動態Web應用程序。它為開發人員構建網站提供了靈活性,挑戰性和強大功能的全新體驗。藉助JavaScript,開發人員能夠構建精確,健壯和響應迅速的網站。使它在其他語言中脫穎而出的一些廣泛功能是回調和閉包。

不僅如此,基於JavaScript的框架和庫,尤其是Angular和React,為Web開發人員提供了更多功能。因此,可以說在未來幾年中,基於JavaScript的框架將推動Web開發。

9.區塊鏈技術

隨著整個2019年比特幣的流行,你們中的許多人可能已經對區塊鏈及其對整個Web開發行業的影響有所了解。

據信,到2020年,區塊鏈將給網路行業帶來根本性的變化。區塊鏈是一種開放式分布式賬本,以消除聯絡需求而提供安全和受保護的在線交易而聞名。它使用普通數據存儲來幫助個人將數據存儲在世界各地。

由於保護水平高,許多跨國銀行和組織都計劃投資於區塊鏈。此外,它還有助於降低金融業務成本,降低交易結算的頻率並改善由透明記錄支持的現金流。

10.物聯網

根據Statista的報告,相信2025年已連接設備的數量將超過300億。物聯網設備的巨大增長將直接影響Web開發,因為公司將從台式機或筆記本電腦控制此類設備。

物聯網將為企業帶來多種機遇,並使他們能夠以高精度提高效率。而且,為了向客戶提供更好的服務,將設備與網站集成已經變得至關重要。開發這些設備的不僅是開發人員,還包括開發人員。我們還將平等參與開發使用,分析和顯示設備數據的應用程序。

物聯網還將帶來很多挑戰,尤其是在數據安全方面,因此開發人員將面臨很多挑戰。盡管只有少數網站或Web應用程序正在使用IoT集成,但在未來幾天中,幾乎每個網站都將開始集成它以改善客戶體驗。

結論

Web開發是一個永遠不會淘汰的領域。實際上,隨著新技術的出現,它將隨著時間的推移不斷發展和變化。同樣,開發人員在使用這些技術方面也越來越先進,因為它允許他們以更好的方式構建應用程序或網站。

⑹ 20個真實的web開發項目集合,一起來看看!(一)

項目一:PC端網站布局


所含知識點:HTML基礎,CSS基礎,CSS核心屬性,CSS樣式層疊,繼承,盒模型,容器,溢出及元素類型,瀏覽器兼容與寬高自適度,定位,錨點與透明,圖片整合,表格,CSS屬性與濾鏡。



項目二:HTML5+CSS3基礎項目


所含知識點:HTML5新增的元素與屬性,表單域增強元素,CSS3選擇器,文字字體相關樣式,CSS3位移與變形處理,CSS3 2D轉換與過度動畫,CSS3 3D轉換與關鍵幀動畫,彈性盒模型,媒體查詢,響應式設計。


項目三:WebApp頁面布局項目


所含知識點:移動端頁面設計規范,移動端切圖,文字流式/控制項彈性/圖片等比例/特殊設計的100%布局,等比縮放布局,viewport/meta,rem/vw的使用,flexbox詳解,移動web特別樣式處理(reset, 1px border, 高清圖片)。


項目四:原生Java交互功能開發項目


所含知識點:基本語法,循環語句,函數與數組,String與Date,BOM與DOM,事件,拖拽效果,cookie存儲,正則表達式,Ajax,面向對象基礎,運動與游戲開發。


項目五:面向對象進階與ES5/ES6應用項目


所含知識點:Promise/A+,設計模式(觀察者模式等),原型鏈,構造函數,執行上下文棧與執行上下文,變數對象與活動對象,作用域鏈,閉包,this,ES5,ES6。


以上就是環球青藤小編關於20個真實的web開發項目集合的相關內容分享,希望對各位小夥伴們有所幫助,想要了解更多相關知識,請關注本平台哦!

⑺ web前端開發主要技術有哪些

前端開發是創建Web頁面或app等前端界面呈現給用戶的過程,通過HTML,CSS及JavaScript以及衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。Web前端的學習起來相對簡單,未來的發展前景也是非常不錯的。

web全棧工程師5.0課程包括:

①計算機基礎以及PS基礎

②前端開發基礎(HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架)

③移動開發

④前端高級開發(ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等)

⑤小程序開發

⑥全棧開發(MySQL資料庫、Python編程語言、Django框架等)

⑦就業拓展(網站SEO與前端安全技術)

互聯網行業目前還是最熱門的行業之一,學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的,發展前景非常好,普通人也可以學習。

想要系統學習,你可以考察對比一下開設有相關專業的熱門學校,好的學校擁有根據當下企業需求自主研發課程的能力,能夠在校期間取得大專或本科學歷,中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的,建議實地考察對比一下。

祝你學有所成,望採納。

⑻ 初學web開發需要掌握哪些知識

Web前端開發要學習的知識很雜亂,知識范圍也很廣。不過,所有技術都是圍繞著三大基本技術來進行的:HTML、CSS,JavaScript。前端的開發中,在頁面的布局時, HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現相應的效果和交互。

掌握三大技能,還要運用多種開發工具輔助開發。目前我們常用到的有:Dreamweaver,Sublime Text ,HBuilder等。

工具只是解決單個問題,在你更加深入了解這個行業之後,你可能還會用到各種不同的框架,目前有三大框架Angular、React、Vue,除此之外還有Bootstrap、Fbootstrapp、BootMetro、Gumby、IVORY、Kube等,都是需要慢慢接觸的。

另外,做前端開發可能還會運用到SEO、DOM、BOM、Ajax等技能,網站性能優化和伺服器端的基礎知識也是需要了解的。

學前端可能會很難,但世界上沒有學不會的知識,相信自己,努力學下去,一定可以成功。

⑼ web前端開發都包括哪些技術

  1. css,學好CSS是網頁外觀的重要一點,CSS可以幫助把網頁外觀做得更加美觀。

  2. div布局: DIV元素是用來為HTML文檔內大塊的內容提供結構和背景的元素。

  3. 學習JavaScript的基本語法,以及如何使用。JavaScript編程將會提高開發人員的個人技能。

  4. 了解Unix和Linux的基本知識雖然這兩點很基礎,但是開發人員了解Unix和Linux的基本知識是有益無害的。

  5. html5+css3:移動端的網頁製作。在移動設備開發HTML5應用只有兩種方法,要不就是全使用HTML5的語法,要不就是僅使用JavaScript引擎,現在也是前端的一個趨勢。

  6. 一些框架的應用:angular.js,node.js,bootsttap等框架的應用。

  7. 了解Web伺服器對Apache的基本配置,並且掌握htaccess配置技巧

  8. web前端開發技術,還需要學習一些seo優化技術,因為前端是經常會和網站接觸的。


⑽ web前端主流框架主要有哪些

1、Bootstrap


AUI是最近流行起來的,作者聲稱是專為APIClound設計的一套框架,解決了許多移動端開發實際中遇到的許多問題,是一個純CSS框架。使用容器+布局+模塊的構建方式,JS輔助,更自由更靈活更易於擴展使用。遵循Google Material設計規范,完美適配各個機型。面向HTML5,使用CSS3實現動畫交互,輕量級高性能。AUI是使用MIT License授權,你可以復制、出售。目前最新版本2.0。

8、Amaze UI

這是稱為妹子UI的開源框架,據稱是中國首個開源HTML5跨屏前端框架。妹子UI以移動優先為理念,從小屏逐漸到大屏,實現響應式網頁。Amaze UI包含20+個CSS組件、20+個JS組件,更有多個包含不同主題的Web組件。相比國外框架,妹子UI關注中文排版提供本地化支持。面向HTML5開發,使用CSS3來實現動畫交互,輕量級高性能。

9、Frozen UI

Frozen UI是一款開源,簡單易用,輕量敏捷的移動端框架。基於手Q樣式規范,目前全面應用於企鵝手Q增值業務中。基礎樣式效果簡單色調清爽,社區活躍,組件自然不少。包括按鈕、列表、表單、通知、提示條、彈出框、選項卡等等常用組件。還包括一個FrozenJs的JS組件庫。可以在主流的Android和IOS上應用。基本樣式使用離線包的方式減少請求提供快速接入方案。當然,根據網友反映,也存在大大小小的bug。不過總體來說,還是值得一用的。奇怪的是,Github上顯示的最後更新時間是一年前,難道已經沒人維護了嗎?

# Running this will show the space usage of each folder in the current directory.# The -h option makes the report easier to read.# -s prevents recursiveness and shows the total size of a folder.# The star wildcard (*) will run on each file/folder in current directory. -sh *1.2G Desktop4.0K Documents40G Downloads4.0K Music4.9M Pictures844K Public4.0K Templates6.9M Videos

還有一個相似的命令 df(Disk Free),使用df會返回有關可用磁碟空間的各種信息。