搜尋
首頁web前端css教學27款好用的CSS框架推薦

27款好用的CSS框架推薦

Apr 05, 2017 pm 04:08 PM
css框架

  利用 CSS 框架,可以簡化你的工作,提高工作效率。 CSS 框架是一系列 CSS 檔案的集合體,包含了基本的元素重置,頁面排版、網格佈局、表單樣式、通用規則等程式碼區塊。下面推薦了27款優秀的CSS框架,你可以選用。

#   1. 960gs

  960 像素的頁面寬度似乎成為了一種設計標準,在當前各種解析度下,能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程,使工作簡單有效率。

  2. YUI 2: Grids CSS

#   芒果曾經介紹過由雅虎開發小組推出的 YUI,而這個 YUI Grids CSS 正是其中的一部分。作為最著名的 CSS 框架之一,YUI Grids CSS 提供了四種預設頁面寬度,六種預設模板。其中的負 Margin 技術,使用度量單位 em,清除佈局浮動等技術非常值得學習和借鑒。

  3. Blueprint

#   Blueprint 是一款成熟的 CSS 框架,它將佈局 (layout)、排版 (typography)、元件 (widget)、重設 (reset)、列印 (print) 等分放到不同的 CSS 檔案中。在網頁設計時就減少了引入的程式碼,並提高了頁面載入效率。

  4. BlueTrip

  BlueTrip 是一個整合了BluePrint & Tripoli 框架的做好的部分;Hartija 的列印樣式;960.gs的簡潔;Elements 圖示的一個css框架。為你提供一個好用的樣式集合和一個製作網站的通用的方法。這樣你就可以集中精神搞設計了。

  5. Elastic CSS

  Elastic 是一個簡單的 CSS 框架用來對網頁進行佈局。 Elastic 可實現各種常見的網頁佈局。

  6. Easy

#   市面上流行的JQUERY組件功能都被納入其框架中,你只要直接使用這個框架,不用學習複雜的AJAX JQuery語法,非常方便。

  7. EZ-CSS

  EZ-CSS是一個輕量級,瀏覽器友好,易於使用的CSS框架。用於建立CSS+p的頁面複雜佈局(layouts)。

  8. Tripoli

#   Tripoli是一個用於HTML表現的通用css規格。透過重設和重建瀏覽器標準,Tripoli 為你的網站專案提供了一個標準的、跨瀏覽器表現的基礎。

  9. CleverCSS

  CleverCSS 是一個用於css的受Python啟發的小型的標記語言,它可用於以整潔的和結構化的方式創建一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的區別是句法:它基於縮排而且不單調。雖然這顯然違反了Python的規則,它仍然是組織樣式的很好的主意。

  10. SenCSS

  它為你CSS重複的部分提供了合理的樣式,這樣你就能更加關注於自己網站的樣式。 SenCSs不像其他CSS框架那樣,它不包含各種雜亂的佈局樣式或是預先定義的柵格系統,那SenCSs能剛什麼呢? baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能辦到的。

  11. Emastic

  Emastic 是一個CSS框架,它有連續的任務:探索陌生的新世界,尋找新生活和新的網站空間,大膽的去CSS框架尚未到達的領域。它是輕量的、在頁面寬度上比較人性化,在網格中使用固定和不固定的列寬。 Elastic 用「em」佈局。

  12. Typogridphy

#   Typogridphy是一個適合網格佈局的CSS框架,用來幫助網頁設計師和前端開發者能夠快速編碼實現漂亮的網格佈局。它可以讓你快速創建出各種各樣的網格佈局,並且非常輕鬆和簡單。這個框架的CSS充分符合語意驗度,嚴格的Xhtml等標準 。

  13. Less Framework 3

#   它是一個以less.js為基礎的CSS框架,它充分利用它的混入,變數和築巢等高階功能。

  14. Elements

  是一個非常輕量級的css框架,從它的程式碼組織結構來看作者顯然是希望真個project能夠全部部署在它這個css的framework中。

  15. Boilerplate

  它是一個HTML/CSS/JS的預設模版,它可以幫助你建立一個支援HTML5-CSS3,跨瀏覽器的網站。

  16. Malo

  一個超小的、靈活的、易用的、寬度可以變化的個人化頁面。

  17. The 1kb CSS Grid

#   如果你只需要一個輕量級的 CSS 網格系統,來建立你網站的主框架,那麼你可以嘗試下 1Kb CSS Grid。 1KB CSS Grid 網站上提供了一個生成器用來客製化 CSS 網格,並且可以直接下載客製化的 CSS 網格。

  18. Fluid Grid System

#

一個網站的導航選單文字不能提供足夠的信息,來表達當前菜單按鈕的內容,一般的解決辦法是使用提示信息ToolTip,那麼流動導航菜單也可以解決此問題,同時也為網站設計的添加了一些時尚而又動感元素。

  19. Content with Style

#   Content with Style下一個邏輯步驟就是將這個擴展為CSS框架,允許使用寫好並通過測試的元件來快速開發網站。實際上所需的是搞定一套命名習慣和一個靈活的基本模板。

  20. WYMstyle

  WYMstyle是一組CSS文件,你可以很容易的組合這些文件來快速的創建你的網站的佈局。透過提供可靠的、經過良好測試的CSS模組,WYMstyle 力求讓每個網站防止枯燥的跨瀏覽器相容性測試。

  21. The Golden Grid

  是vladocar開發的一款比較新的CSS框架,可以為現代網站設計提供一個全新的佈局參考。它非常小巧,所以很容易學習上手。其中的某些處理佈局的方法是很值得借鏡的。如果你了解960網格系統,那麼這個框架,你會更容易使用。

  22. Yet Another Multicolumn Layout (YAML)

#   YAML是一個 (X)HTML/CSS 框架,它為了滿足彈性的和使用者友好的佈局而開發的。 YAML自2007年出現以來就提供了廣而全的文件。像許多其他的CSS-Framework如Blueprint CSS 或 YUI Grids 一樣,提供了一個預先定義的 CSS-classes 系統,用來建立基於網格的佈局。要建立一個佈局,設計師需要建立網站 HTML 結構,然後為容器(html標籤)書寫CSS,剩下的就自理了。

  23. Compass

  Compass是一種樣式的創作的框架,使你的樣式表和標示容易建立和維護。寫自己的樣式用sass而非原來的是css,利用Sass中的Mixins和Compass結合,你可以應用樣式框架如Blueprint來代替你自己的樣式標記.Compass基於sass,可以利用css框架比如Blueprint,非常的便捷。

  24. Schema Web Design Framework

#   Schema 是一個為了提供在重複的設計任務中必須的CSS和HTML標籤而設計的表現層的網頁框架設計。 與為每一個新的網站專案從零開始創建HTMl/CSS不同,Schema提供必要的基礎來開始並立刻讓你的設計跑起來。

  25. Sparkl

  它是一個很成熟的系統,它小巧靈活、易學易用。

  26. The jQuery UI CSS Framework

#   它是一套基於jquery構建具有皮膚更換功能的UI控制和滑鼠互動組件。用於幫助開發人員建立具有良好使用者體驗的網路應用程式。提供了一個強大的CSS Framework,為使用者定義使用jQuery widgets。其中的ThemeRoller更是讓你隨心所欲地操作設計不同風格的網頁介面。

  27. 52framework

#   它是一個Web開發框架,它能實現HTML5和CSS3。它是一個跨瀏覽器的框架,可以在所有主流的瀏覽器上運行,包括IE6。主要是採用一個HTML5 enabling JavaScript file檔來實作。

以上是27款好用的CSS框架推薦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
兩個圖像和一個API:我們重新著色產品所需的一切兩個圖像和一個API:我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此,只有一種產品之一,我們可以以不同的方式對其進行著色以顯示

每周平台新聞:第三方代碼,被動混合內容,連接最慢的國家的影響每周平台新聞:第三方代碼,被動混合內容,連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中,燈塔在第三方腳本上闡明了燈光,不安全的資源將在安全站點上被阻止,許多國家連接速度

託管您自己的非JavaScript分析的選項託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics(廣泛使用)

它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分,但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super()是什麼?JavaScript中的Super()是什麼?Apr 15, 2025 am 10:59 AM

當您看到一些稱為super()的JavaScript時,在子類中,您會使用super()調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API,它們顯示用於用戶交互的特殊UI。著名:

為什麼可訪問的網站如此難以構建?為什麼可訪問的網站如此難以構建?Apr 15, 2025 am 10:45 AM

前幾天,我與一些前端人們聊天,講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性,它可以正是您認為應該做的:

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),