9款流行的 HTML5/CSS3 框架推薦

2021-01-21 開源中國

HTML5 和 CSS3 框架越來越流行，緊跟潮流，本文推薦9款不錯的HTML5 和 CSS3 框架。

 

Gridless 是個很棒的HTML5 和CSS3 框架，製作跨平臺網站排版、布局等。

作者 Harry Roberts ，該框架應用於較小的屏幕，主要特點是甚至對IE6+的新的HTML5 元素的基本支持。

Less Framework 4 是個CSS網格系統，用於設計自適應網站，包括4個布局和3組排版預設。

Baseline 用於快速進行網站原型設計，基線網格作為設計基礎。

Gravity 方便製作強大的、易維護的HTML5站點，幫助快速原型設計。

G5 Framework 封裝了很多的功能組合，見上圖。

Perkins 是個純粹的HTML5/CSS3框架，有簡單的HTML5模板，包括大部分標籤、一組LESS樣式，創建常見的任務如導航、圓角、漸變等。

52 Framework 主要用於優化HTML5和CSS3的跨瀏覽器兼容性的框架。

HTML5 Framework 恰如其名，在HTML5創建布局的框架。基本文件包括HTML5元素，並有一CSS文件風格化這些元素。

原文：http://webexpedition18.com/articles/useful-html5css3-frameworks/

相關焦點

  • HTML布局與框架
    HTML框架框架就是在主頁上，調用其他的html來定義它的位置，使它可以重複使用，就像Java裡面的class一樣。可以互相調用。可以先建3個不顏色的html<!-- frame3.html --><!
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    在第二期中，我們對html做了入門，已經有了對網頁開發基本的了解。本節知識開始書寫html網頁結構。本節知識視頻教程以下開始文字講解：一、Html代碼基本結構html代碼就像一個人一樣，可以分成幾個部分。我們先來了解三個節點。
  • 如何在HTML文檔中使用CSS樣式表?
    如果使用內聯樣式將CSS添加到HTML文檔中，可以參考以下步驟。步驟1：首先，在文本編輯器中輸入HTML代碼，或者打開現有的HTML文件。<!使用內部樣式那些僅影響當前HTML文檔的CSS樣式表稱為內部樣式表。這些樣式表定義在<head>開始和結束標籤之間。如果我們想使用「內部樣式表」將CSS添加到我們的Html文檔中，請參考以下步驟。步驟1：首先，在文本編輯器中輸入HTML代碼，或者打開現有的HTML文件。
  • 一款絕對讓你驚豔的CSS框架——TailwindCSS
    就像他的簡介一樣Utility-First效用優先的CSS框架。相比bootstrap，semantic ui antd這些組件庫，tailwind只是個css庫，簡單的說就是可以完成任何ui交互，而上面的組件庫一般就是做個後臺應用，所以使用tailwind的環境更廣泛一些。幾個亮眼的地方首先是響應式設計。
  • Python學習第235課——html引入css的4種方式
    之前我們寫css代碼，都是在html文件的<head>標籤裡面的<style>標籤裡面，直接寫css代碼。在html中以這種方式引入css，叫做內嵌式方法。當我們只有一個或幾個html文件時，用內嵌式方法引入css是沒有什麼問題的，但是當我們的網站比較大，網頁比較多的時候，每一個html文件，我們都用內嵌式去引入css的話，不但寫的時候比較麻煩，而且以後維護起來也比較麻煩。
  • 如何在SpringBoot項目中使用Bootstrap前端框架並設計表格
    如果頁面模板中使用Bootstrap前端框架，需要將Bootstrap對應的js和css拷貝到指定文件夾中。CSS3Bootstrap1、打開IntelliJ IDEA 2020開發工具，創建SpringBoot框架項目
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
  • IE9 beta對HTML5/CSS3的支持
    認真看了說明之後才清楚，原來這裡的測試項目只是微軟提交給W3C的條目，並不是完整的內容，比如CSS3中，這裡只包含了5項技術，而不是所有的CSS3內容——強烈的BS一下微軟，差點上他的當了。其實，想要了解一個瀏覽器對HTML5/CSS3的支持很簡單，上篇文章中介紹的Modernizr就是一個非常好的工具，我這裡偷個懶，直接用訪問findmebyip，即可看到IE9beta對它們的支持：IE9對CSS3新特性的支持：可見，目前IE9beta對CSS3新特性的支持還是很弱的。
  • HTML與CSS簡介(一)
    這樣的大亂燉給工程師和網頁設計師都造成了很大的困擾——如果你曾經試圖打開過某個網站的原始碼你就會知道，那裡面亂成什麼德行，而那個時期的原始碼是你能看到的混亂程度再乘個5位數……好吧這只是個比喻，總之因為雙方都受不了混亂的代碼，於是有人提出建議，把樣式從內容中踢出去，被踢出來的部分變成了CSS，留下的便是HTML。
  • CSS Modules 與 scoped 的不一樣
    ></template><style module>.green { color: green;}</style>編譯後 - vue 環境<div class="green_3UI7s9iz">demo demo</div>
  • 9款令人驚嘆的HTML5 3D動畫應用
    這款HTML5 3D動畫非常酷，它的實現離不開js動畫框架TweenMax。之前我們也分享過幾款挺不錯的HTML5文字特效，像HTML5/CSS3 3D文字特效 文字外翻效果，也具有3D的效果。這款CSS3蚱蜢還有眨眼的動畫，非常酷。
  • 前端開發大盤點:2015最流行前端框架TOP20
    Firefox, Chrome, Safari, IE8+ (你需要 Respond.js forIE8)響應式: Yes模塊化: Yes官網地址：http://getbootstrap.com/Github地址：https://github.com/twbs/bootstrap2、名稱：html5
  • Pure 0.2.1 發布,雅虎的 CSS 框架
    你可通過下面代碼在頁面中引入 Pure：<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">Pure 是來自雅虎的 CSS 框架，使用 Normalize.CSS 無需任何 JavaScript 代碼。
  • Web前端學習第20課,如何為HTML元素編寫CSS樣式表
    本節課主要有關CSS兩個方面的問題：css樣式規則怎麼寫以及寫在哪裡的問題。1.CSS的寫法規則CSS 寫法規則由兩部分構成：選擇器，以及一條或多條屬性聲明。選擇器是您需要設置樣式的 HTML 元素。每條聲明由屬性和值組成。屬性是您希望設置元素哪方面的樣式，比如文本的顏色color，每個屬性有一個具體的取值。屬性和值之間用冒號分開。
  • 【開發小技巧】024—如何使用HTML和CSS創建加載模糊文本動畫效果?
    英文 | https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-html-and-css
  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    type=」text/css」用來定義文件的類型為樣式表文本文件。例如，設置一個div標籤的樣式，那麼文檔中所以用<div>和</div>框住的內容就應用該樣式，如下圖：又如，定義一個樣式類，引用該類，代碼及效果如下圖：內嵌式樣式表是可以被重複引用的，但是卻不能跨頁使用。
  • HTML+CSS:三種css的引入方式,內鏈式、嵌入式、外部式
    上篇文章我們簡單介紹了css的概念以及語法，本篇文章我們將為大家介紹下css的三種引入方式。（1）內鏈式引入內鏈式css樣式表就是把css代碼直接寫在現有的HTML標籤中，具體的使用方法如下面所示：<divstyle="color:red">設置文字的顏色為紅色</div>這裡要注意：樣式的內容寫在元素的開始標籤裡，並且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開
  • HTML+CSS:圖文結合讓你深入理解css盒模型
    本篇文章要給大家講的算是比較重點的內容了，css盒模型。理解了它對你以後頁面的排版和布局有著非常關鍵的作用。什麼是css盒模型？css盒子模型 又稱框模型 (Box Model) ，它包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。下圖就為我們標準的盒模型示意圖。css盒模型進階練習1）我們來看下邊的一個例子。
  • HTML+CSS:css清除浮動的幾種方式,哪種最合適?
    上篇文章我們說了元素的浮動，本篇文章主要介紹下css浮動帶來的影響，以及如何清除浮動。細心的人可能發現了，在我們上篇文章寫的導航條中存在一個問題，那就是使用了float之後，父級盒子的高度變為0了。（2）在標籤結尾處加空div標籤 clear:both原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，不利於頁面的優化。
  • 前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架，沒有之一，當前的最新版本是bootstrap4.4.1，和之前的3.X版本相比較有較大的變化，不過都是屬於各種標籤的分離，方法還是一樣的，在網上各種教程雖多，但是對於入門還不是不夠，很多入門教程講得雲裡霧裡，看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。