前有非常多的在線實用工具，例如思維導圖、在線轉換格式等。部分在線工具還支持離線狀態下使用。

如果你覺得一些經常用到的在線工具，每次都要通過瀏覽器訪問網站后使用，比較麻煩的話，可以考慮把它生成本地應用。

目前 Chrome 瀏覽器就支持把網站生成桌面應用程序，不過有個弊端，那就是想要運行它，必須依賴 Chrome 瀏覽器。

所以今天鋒哥教大家直接把網站生成 EXE 程序，無需會編程代碼。這里要用到這個「nativefier」基于 Electron 的工具，只要通過一行代碼就能生成 EXE 程序。

nativefier使用

目前「nativefier」支持多個平臺，包括有 Windows、Mac、Linux，你可以在這些系統里面把網站生成可執行的程序。

1.使用「nativefier」先要安裝 Node.js 程序，可以到 https://nodejs.org/zh-cn 官方網站下載，建議下載長期支持版。

2.由于 Node.js 國外源加載速度很慢，我們可以把它修改成國內的源，建議用淘寶的源地址。

快捷鍵 Win+Q，搜索系統變量：環境變量 → 新建變量：

• 變量名：ELECTRON_MIRROR
• 變量值：http://npm.taobao.org/mirrors/electron/

3.快捷鍵 Win+X，運行 PowerShell(管理員)，輸入下面的命令開始安裝。

• npm install -g nativefier

耐心等待一會，一直到出現 Thank you for using core-js.....for polyfilling JavaScript standard library! 就是安裝好了。

4.接下來就可以把網站生成程序了，運行 Node.js command prompt 輸入命令：nativefier "網址"。這里鋒哥把之前制作的裝機必備導航作為例子：

• nativefier "https://x1g.la/win"

最后 nativefier 生成的程序默認會在 C盤，你的用戶名，WIN -1 文件夾里面，運行 WIN - 1.exe 就可以了。在程序里面你可以選中文本內容，通過右鍵來新窗口打開、復制內容等操作。

另外官方也提供了一些參數，例如可以修改圖標、修改程序的默認名稱。

• nativefier --name "app名字" "網址"
• navivefier --name "app圖標路徑" "網址"

圖標支持最大圖標、最小圖標，參考下面的參數：

--min-width "大小px" --max-width "大小px" --min-height "大小px" --max-height "大小px"

5.將本地網頁制作成程序，在生成的命令里面添加指向的 HTML 文件，如下：

• nativefier --name "Sample" "index.html"

然后打開 \app\nativefier.json 文件，搜索 "targetURL"，把 targetURL 指定的地址修改成你的 html 路徑即可。

總結

通過「nativefier」你可以簡單方便的把一些在線工具打包成本地應用，還是比較不錯的。

另外從官方的文檔里面看到，似乎還支持嵌入 Flash 插件的支持。因為目前還有一些網站需要依賴 Flash 插件，你可以打包成單獨的程序來使用。有興趣的自己研究看看了。

用 CSS 框架是當前大部分前后端開發人員都會選擇的，CSS框架的好處是幫開發人員節省了開發時間，提高了工作效率，改善用戶體驗，并且能很好的解決各種瀏覽器之間的兼容性問題。當然也會存在代碼冗余，影響網站打開速度，但是對于好處來說這些問題都不是問題。

接下去我會分享我所知道的所有的CSS框架，盡量把網絡上現有的框架都收集起來，方便網友們的選擇和比較。（框架順序不代碼框架的好壞）

Bootstrap

Bootstrap 就不多做介紹了屬于老牌框架了，國內教程地址：www.bootcss.com（非官網），該網站目前已經整理了從2.0~5.0的所有教程資料。

layui

layui國人開發。layui是一套開源的 Web UI 解決方案，采用自身經典的模塊化規范，并遵循原生 HTML/CSS/JS 的開發方式，極易上手，拿來即用。其風格簡約輕盈，而組件優雅豐盈，從源代碼到使用方法的每一處細節都經過精心雕琢，非常適合網頁界面的快速開發。layui 區別于那些基于 MVVM 底層的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，它更多是面向后端開發者，你無需涉足前端各種工具，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

Semantic UI

Semantic UI—完全語義化的前端界面開發框架，跟 Bootstrap 和 Foundation 比起來，還是有些不同的，在功能特性上、布局設計上、用戶體驗上均存在很多差異。

Bulma

作為一個基于Flexbox的開源框架，Bulma在全世界擁有超過20萬名開發用戶。它可以通過可視化的組件，讓開發人員了解其運作的過程。該前端框架通過各種技術，為前端開發人員提供了一種內聚(cohesive)的界面。此外，由于它使用了響應式模板，因此我們可以更好地專注于網站的內容，而不是代碼的編寫。

PureCSS

由Yahoo開發的PureCSS，提供了一組體積小、且具有快速響應能力的CSS模塊。它非常適合開發那些界面美觀且功能不同的項目。PureCSS具有快速響應能力的內置設計，以及最小體積的標準化CSS，而且它們都是免費的!

Tailwind CSS

Tailwind CSS 是一個功能類優先的 CSS 框架,它由 Adam Wathan 創建。本站提供 Tailwind CSS 官方文檔中文翻譯致力于為廣大國內開發者提供準確的中文文檔,助力開發者掌握并使用這一框架。

AXUI

ax前端框架的特點是：能用css寫的不用js；能用js寫的不用插件；能用插件的不重復使用插件。通過觀察本框架的核心文件會發現核心文件只有ax.css和ax.js，加載速度飛快。ax前端框架對一些常用的功能進行集成處理，比如美化滾動條、菜單、cookie等，在演示頁面復制代碼即可使用。

Amaze UI

Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。

Foundation

Foundation 是一個適用于任何設備、媒介和可訪問性的框架。Foundation是一個響應式前端框架系列，它可以讓你輕松設計出漂亮的響應式網站、應用程序和電子郵件，在任何設備上看起來都非常漂亮。Foundation具有語義性、可讀性、靈活性和完全可定制性。

ZUI

一個基于 Bootstrap 深度定制開源前端實踐方案，幫助你快速構建現代跨屏應用。

Uikit

UIkit 是 YOOtheme 團隊開發的一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 組件，它們使用簡單，容易定制和擴展。

Pintuer

拼圖前端框架 Pintuer.com：國內優秀的HTML、CSS、JS跨屏響應式開源前端框架，使用最新瀏覽器技術，為快速的前端開發提供一系列的顏色、文本、排版、內容、媒體、按鈕、表單、元件、導航、組件等樣式工具包，占用資源小，使用拼圖可以快速構建簡潔、優雅而且自動適應手機、平板、桌面電腦等設備的前端界面，讓前端開發像玩拼圖游戲一下輕松靈活。

H-ui

H-ui前端框架系統是基于 HTML、CSS、JAVASCRIPT開發的輕量級web前端框架。H-ui是根據中國現階段網站特性和程序員開發習慣，在bootstrap基礎上，吸取眾家框架之長，融合開發者自己的思想，進行深度開發，提煉出一套適合中國開發者的HTML和CSS規范。開源免費，簡單靈活，兼容性好，一經推出深受國內廣大web開發者喜愛。

跨屏UI

如果說Boostrap提供了一個可靠的網頁元素UI組件，來構建一個網頁，那么跨屏UI框架，則在bootstrap基礎上提供了更為完整的網頁組件，例如“關于我們”、“聯系我們”，“相冊”，“產品”等等組件。

Milligram

　　Milligram雖然非常輕小，但功能依舊不差，它具有一整套web開發工具，并且充分利用了CSS3規范中的各種原理來幫助開發人員快速開發。

暫時收集了這些框架，你可以根據實際項目的需求，進行選擇，正式使用之前請先測試代碼，確保你采用的框架不會出現CSS或HTML的瀏覽器兼容性問題。

~~~感謝閱讀，順便點個贊，歡迎關注【Yimao軟件】，謝謝~~~

己如何做一個網站，互聯網時代很多人有想法自己做一個網站，但是會遇到不知道多少錢？具體怎么做？需要準備些什么？在哪里可以了解到？本篇文章就是告訴大家具體的操作步驟。

想要做一個個人網站？還是單單想要做一個博客？還是一個小型網站試試互聯網的水平？

首先你得確定好建站的目的和方向。確定好之后，就需要去準備買建站必須的東西： 域名、空間、模板了。

這里有必要給大家解釋一下，特別是不懂得小白。通俗點講：建一個網站就是建一個房子。

1、域名就是你房子的門牌號碼和地址，別人能通過這個找到你。

2、空間就是你要建的房子，注意了！空間是毛坯房，里面什么都沒有（空間也叫服務器、主機，不要被被人說的云里霧里，只是因為他多了很多名字而已，就像你叫張三你小名叫狗蛋一樣）。

3、模板就是你房子里面的裝修，一個網站就是由空間、域名、模板組成。

對于一個新手小白想做一個網站試試水的話，建議可以去 萬網或者其他大大小小的售賣服務器的公司，其實基本都差不多，域名的話買.com 的大概就30-60左右就可以了，碰到搞活動的話就10元，想要不麻煩 不備案可以上淘寶買香港空間免備案省事，也就是100-200之內就可以了。

1.域名有.cn .com .net .cc 等等后綴，.com的基本沒什么資源了，可以選擇.cn價錢也很便宜幾十塊一年。

2.空間有動態 靜態 （簡單理解就是否支持動畫和后臺修改的區別）或者現在又有雙線或多線，就是支持多種網絡服務商能夠快速訪問。但是基本也就是1M幾十塊 正常100-200M足夠用了，上面2項不可少 。

3.網站內部內容，這是關鍵。

這里提醒大家一點，現在互聯網上充斥著大量套模板建站，多了搜索引擎就不喜歡了，如果你是想要做推廣做優化，強烈建議你不要去做模板建站！當然只是想要做個網站試試，那是可以的。

這里就會有很多的小白疑惑了，上面說了自己做一個網站只要300塊錢左右，為什么找建站公司，一報價就是幾千上萬呢？是不是聽到他們報價的瞬間就想罵娘了？

這里也科普一下，上面有提到網站內部內容才是關鍵，值錢的是這個，你找建站公司去做的網站，建站公司使用的都是定制的模板，也就是程序員一個字母一個符號一個代碼敲出來的，還需要長時間精準的校對，錯一個小數點就全亂了，就像是開源字節一樣，一個標點符號都不能錯！還有就是需要建站公司設計網站的版面，包括網站上面的圖片、框架、字體、顏色等，然后需要程序和設計結合起來放在空間里，這里面需要耗費大量的人力（物力是可以忽略不計的哈）這樣做出來的網站在互聯網上是獨一無二的，而且這種網站比較適合優化，適合百度優化排名，搜索引擎也比較喜歡，好的東西、獨一無二的東西自然就貴了。

如若轉載，請注明出處：開源字節 https://sourcebyte.cn/article/146.html