首頁 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue配合什麼css框架 vue配合什麼css框架 Dec 26, 2023 pm 01:48 PM

與Vue相容的常見CSS框架有「BootstrapVue」、「Element UI」、「Vuetify」、「Buefy」四種,上述框架都是開源的,擁有龐大的社群支持,它們提供了豐富的UI元件、靈活的佈局選項和易於自訂的主題,使得開發人員可以快速建立美觀、功能齊全的網路應用程式。

推薦五個卓越的CSS框架,讓你在前端開發中事半功倍 推薦五個卓越的CSS框架,讓你在前端開發中事半功倍 Jan 16, 2024 am 09:46 AM

隨著網路的快速發展,前端開發成為了一個不可忽視的重要領域。身為前端開發人員,我們需要不斷提升自己的開發效率和水準。而使用優秀的CSS框架是提高前端開發效率的有效途徑。本文將為大家介紹五個優秀的CSS框架,希望對大家的前端開發工作有所幫助。 BootstrapBootstrap是目前最受歡迎的CSS框架之一。它提供了豐富的CSS類別和JavaScrip

css框架和元件庫有什麼區別 css框架和元件庫有什麼區別 Dec 26, 2023 pm 05:03 PM

CSS框架和元件庫是兩個不同的概念,但它們之間有一定的關聯:1、CSS框架是一種提供了一整套樣式、佈局和元件的工具,而元件庫則是針對某個特定的元件或模組進行設計和開發的庫;2、CSS框架用於快速建立網頁和應用程序,而元件庫提供了一系列可復用的UI元件;3、框架通常包含了一系列預先定義的CSS類別和樣式,而元件庫中的每個元件都具有獨立的樣式和行為。

css框架是什麼意思 css框架是什麼意思 Oct 09, 2023 pm 05:56 PM

css框架是一種預先設計好的樣式庫,用於簡化和加速網頁開發流程。 css框架提供了一組已經定義好的CSS樣式和佈局,開發者可以直接使用這些樣式來建立網頁,而無需從頭開始編寫CSS程式碼。 CSS框架通常包含了一系列常用的網頁元件,如按鈕、表格、導覽列等,以及一些常見的佈局模板,如柵欄系統和響應式設計等等。開發者需要謹慎選擇和使用框架,以確保網頁的效能和使用者體驗。

探究最佳響應式版面框架:競爭激烈! 探究最佳響應式版面框架:競爭激烈! Feb 19, 2024 pm 05:19 PM

響應式佈局框架大比拼:誰是最佳選擇?隨著行動裝置的普及和多樣化,網頁的響應式佈局變得越來越重要。為了滿足使用者不同的設備和螢幕尺寸,在設計和開發網頁時採用響應式佈局框架是必不可少的。然而,面對眾多的框架選擇,我們不禁要問:哪個才是最佳選擇?以下將對目前較流行的三種響應式佈局框架進行比較評價,它們分別是Bootstrap、Foundation和Tailwind

CSS框架和元件庫的差異在哪裡? CSS框架和元件庫的差異在哪裡? Jan 16, 2024 am 08:56 AM

CSS框架和元件庫的功能差異是什麼?隨著Web開發的不斷發展,CSS框架和元件庫成為了開發者常用的工具之一。兩者都可以幫助開發者更快速、更有效率地建立Web介面,但它們在功能上存在一些差異。 CSS框架是一套預先定義的樣式規則和佈局模板,旨在提供一致性和響應式的設計。它們通常包含一系列CSS樣式文件,並透過類別和標籤選擇器對HTML元素進行樣式化。 CSS框架的作用

css框架有哪些 css框架有哪些 Oct 08, 2023 pm 01:31 PM

css框架有Bootstrap、Foundation、Bulma、Semantic UI和Materialize。詳細介紹:1、Bootstrap,具有易於使用的網格系統、按鈕、導航列、表單元素等各種預定義樣式和組件;2、Foundation,具有網格系統、按鈕、導航列等組件,但它更加注重自訂和可擴展性;3、Bulma,具有響應式網格系統、按鈕、表單元素等常見元件等等。

在dcat admin中如何實現點擊添加數據的自定義表格功能? 在dcat admin中如何實現點擊添加數據的自定義表格功能? Apr 01, 2025 am 07:09 AM

在dcatadmin(laravel-admin)中如何實現自定義點擊添加數據的表格功能在使用dcat...

See all articles