在本文中，我們將與大家分享 10個(gè)最佳的極簡(jiǎn) CSS 框架，它們能夠?yàn)槟闾峁┙ㄕ颈貍涞慕M件，幫助你節(jié)省時(shí)間。

希望對(duì)大家有所幫助！

一、Spectre（一個(gè)輕量級(jí)、響應(yīng)式的現(xiàn)代 CSS 框架，用于快速建站和擴(kuò)展程序的開發(fā)。它通過最佳編碼實(shí)踐和一致性的設(shè)計(jì)語言，為排版與元素、基于 Flexbox 的響應(yīng)布局系統(tǒng)、CSS 組件提供了基本樣式。）

二、Milligram（提供了極簡(jiǎn)樣式設(shè)置，便于你快速、簡(jiǎn)潔的開啟建站之旅。雖然它不是一個(gè) UI 框架，但它的設(shè)計(jì)理念卻是以提供優(yōu)秀的性能、高效的開發(fā)效率以及最少的屬性重置而構(gòu)建的。同時(shí)，它也是輕量的）

三、Mobi（是一個(gè)輕量級(jí)、可擴(kuò)展、移動(dòng)優(yōu)先的 CSS 框架。它專注于細(xì)節(jié)，對(duì)于內(nèi)容豐富的網(wǎng)頁能夠提供優(yōu)質(zhì)的用戶體驗(yàn)。雖然，它專注移動(dòng)端，但桌面客戶端的體驗(yàn)也是很棒的。）

四、Mini（作為一個(gè) Gzip 壓縮后不到 7KB 大小的極簡(jiǎn)框架，它具備響應(yīng)式、易用性和定制性等特性，旨在為你提供盡可能多的功能。由于它是輕量框架，不僅讓你創(chuàng)建的網(wǎng)站和應(yīng)用程序具備更快的加載速度，而且它所提供的組件可以滿足基本的開發(fā)要求。）

五、 Siimple（是一個(gè)助你打造扁平化網(wǎng)站風(fēng)格的輕量、響應(yīng)式的開源框架。它內(nèi)置了 SASS / SCSS，為你的網(wǎng)頁設(shè)計(jì)提供了簡(jiǎn)潔的開始。）

六、Base（一個(gè)穩(wěn)固的響應(yīng)式 HTML 與 CSS 框架。）

七、Scooter（專注為 Dropbox 提供基礎(chǔ)樣式、CSS 組件以及快速靜態(tài)原型的 SCSS 框架。）

八、Responsive（一個(gè)功能強(qiáng)大、對(duì)開發(fā)人員友好的，用于構(gòu)建響應(yīng)式網(wǎng)站的輕量級(jí)前端框架。）

九、 拼圖 Pintuer （國內(nèi)優(yōu)秀的HTML、CSS、JS跨屏響應(yīng)式開源前端框架，使用最新瀏覽器技術(shù)，為快速的前端開發(fā)提供一系統(tǒng)的文本、圖標(biāo)、媒體、表格、表單、按鈕、菜單、網(wǎng)格系統(tǒng)等樣式工具包，占用資源小，使用拼圖可以快速構(gòu)建簡(jiǎn)潔、優(yōu)雅而且自動(dòng)適應(yīng)手機(jī)、平板、桌面電腦等設(shè)備的前端界面，讓前端開發(fā)像玩游戲一下快樂而輕松。）

十、 BluCSS （是一個(gè)簡(jiǎn)便易記的CSS框架。可輕松應(yīng)用在項(xiàng)目中。）

相信大家都會(huì)自己心中最喜歡的工具，如果本文沒有列舉出來，歡迎大家在評(píng)論區(qū)留下自己心目中最喜歡、最有價(jià)值的工具~~

切圖 qietu(.com)

.HTML中表單元素的基本概念

HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動(dòng)態(tài)頁面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容.

表單一般用來收集用戶的輸入信息

2.表單工作原理

訪問者在瀏覽有表單的網(wǎng)頁時(shí),可填寫必需的信息,然后按某個(gè)按鈕提交,這些信息通過網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求糾正錯(cuò)誤.當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個(gè)輸入完成的信息

3.表單的功能

功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.

4.表單的常用類型及說明

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當(dāng)用戶要在表單中輸入字母,數(shù)字內(nèi)容時(shí),就會(huì)用到文本域

代碼如下:

注意,表單本身并不可見.同時(shí),在大多瀏覽器中,文本域的缺省寬度是20個(gè)字符.

在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號(hào)來代替這些字符.

4.單選按鈕(radio)：

當(dāng)用戶從若干給定的選擇中選取一個(gè)選項(xiàng)時(shí),就會(huì)用到單選框.

代碼如下:

當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí),該按鈕會(huì)變?yōu)檫x中狀態(tài),其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài).

5.復(fù)選框(checkboxes)

當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),就會(huì)用到復(fù)選框

代碼如下:

6.重置按鈕(reset)

重置按鈕會(huì)清除當(dāng)前頁面上的用戶輸入的所有數(shù)據(jù),把當(dāng)前頁面恢復(fù)到打開時(shí)的樣子.

代碼如下:

<form><p><input type="reset"></p></form>

7.提交按鈕

會(huì)在當(dāng)前頁面生成一個(gè)提交按鈕,用戶點(diǎn)擊此按鈕,瀏覽器就會(huì)把當(dāng)前頁面用戶輸入的數(shù)據(jù)傳送到服務(wù)端

代碼如下:

<form><p><input type="button" value="按鈕"/></p></form>

8.提交文件

當(dāng)需要把客戶端的文件發(fā)送到服務(wù)端時(shí),需要用到提交文件按鈕

代碼如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上傳文件注意兩點(diǎn): 請(qǐng)求方式必須是post enctype="multipart/form-data"

9.下拉菜單

當(dāng)需要用戶從很多選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)時(shí),也可以使用下拉列表.

代碼如下:

代碼如下:

OPTION

selected="selected"

10.表單屬性

1.action屬性的說明:

使用action選項(xiàng)來指定服務(wù)端的腳本來處理被提交的表單

<form action="/index/" method="post">

如果省略action屬性,則action會(huì)被設(shè)置為當(dāng)前頁面

2.method屬性的說明:

method屬性規(guī)定在提交表單時(shí)所用的http方法(POST或GET)

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式說明:

如果表單提交是被動(dòng)的(比如搜索引擎查詢),并且沒有敏感信息.

當(dāng)使用get方法時(shí),表單的數(shù)據(jù)在頁面地址欄中是可見的

因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會(huì)設(shè)定容量限制

如果表單正在更新數(shù)據(jù),或者包含敏感信息(比如密碼)時(shí)應(yīng)該使用post,post的安全性更好.

因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的.

切圖 qietu(.com)