整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          推薦四大常用的html5框架供大家參考

          推薦四大常用的html5框架供大家參考

          面推薦的幾款主流HTML5框架,上手都比較快,而且網(wǎng)站的教程相對(duì)完善,無(wú)論是初學(xué)還是專業(yè)前端,都能找到適合自己操作的框架。

          1 Bootstrap

          全球數(shù)以百萬(wàn)計(jì)的網(wǎng)站都是基于 Bootstrap 構(gòu)建的。Bootstrap能讓所有開(kāi)發(fā)者都能快速上手、所有設(shè)備都可以適配、所有項(xiàng)目都適用。此外,bootstrap的官網(wǎng)也有很多教程提供。Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件,并自帶以下特性:全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class,以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。

          2 SUI Mobile

          SUI Mobile 是一套基于 Framework7 開(kāi)發(fā)的UI庫(kù)。它非常輕量、精美,只需要引入我們的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常適合開(kāi)發(fā)跨平臺(tái)Web App。SUI Mobile 的組件都是按照iOS風(fēng)格設(shè)計(jì)的,,非常輕量,核心庫(kù)壓縮Gzip后的JS、CSS網(wǎng)絡(luò)傳輸體積總共只有52K,卻提供了20+個(gè)常用的組件。網(wǎng)站內(nèi)有詳細(xì)的編碼介紹。

          3 jQuery mobile

          jQuery Mobile 是針對(duì)觸屏智能手機(jī)與平板電腦的網(wǎng)頁(yè)開(kāi)發(fā)框架。如果開(kāi)發(fā)者了解 jQuery,可以很容易的學(xué)習(xí) jQuery Mobile。

          4 jQuery UI

          jQuery UI 主要分為3個(gè)部分:交互、微件和效果庫(kù)。主打代碼開(kāi)源,操作繼承了jQuery 的簡(jiǎn)單特性,兼容各主流桌面瀏覽器。

          請(qǐng)大家多多關(guān)注我的頭條號(hào),謝謝大家

          者 | 敘帝利

          鏈接 | www.cnblogs.com/nzbin/p/7073601.html

          前言

          這篇文章我已經(jīng)醞釀了半年之久,或者說(shuō)拖沓了這么久吧。想說(shuō)的東西很多,卻又無(wú)從說(shuō)起。如今輕量級(jí)框架如雨后春筍,層出不窮。我想每個(gè)人都應(yīng)該歸納總結(jié)工作中的常見(jiàn)需求,編寫一套適合自己的 CSS 框架。

          在之前的文章中,我提到了面向?qū)ο蟮?CSS(比如 BEM、OOCSS、SMACSS,詳見(jiàn) http://vanseodesign.com/css/dry-principles/)。這是一種思想,并不涉及具體的 CSS 問(wèn)題,主要是類命名的策略!現(xiàn)在仍然有很多人對(duì)于前端框架的認(rèn)識(shí)還停留在表面,認(rèn)為 Bootstrap 是后端人員專用,前端沒(méi)必要等等。

          我不知道這種說(shuō)法從何而來(lái),我最開(kāi)始也不喜歡使用框架,或許和很多人的想法一樣,畏懼新知識(shí)、害怕難以駕馭、遇到問(wèn)題的時(shí)候無(wú)法解決等等。最關(guān)鍵的一點(diǎn)是很多人認(rèn)為框架的樣式是固定的,修改起來(lái)太麻煩,還不如自己根據(jù)設(shè)計(jì)圖寫起來(lái)方便。

          為什么使用框架

          為什么使用框架?答案顯而易見(jiàn),效率。除此之外,使用框架或者研究框架的意義還有很多,比如面向?qū)ο笏枷氲木唧w實(shí)現(xiàn)。在上一家公司工作的時(shí)候,開(kāi)始的幾個(gè)項(xiàng)目我也是用最原始的方法書(shū)寫 CSS 。項(xiàng)目之中最讓我頭疼的就是類的命名。我想大多數(shù)人都是根據(jù)功能去命名,這就造成了很多的冗余,相同的組件可能寫很多次。簡(jiǎn)單舉一個(gè)例子,如下圖,個(gè)人中心的登錄界面。

          很多人包括我剛開(kāi)始的時(shí)候可能會(huì)選擇下面的類命名及布局方式,其通用性非常差:

          <div class="login-area"> <div class="login-img"> <img src="..." /> </div> <div class="login-text"> <a href="...">請(qǐng)點(diǎn)擊登錄</a> </div></div>

          然而了解 Bootstrap 的人應(yīng)該一眼就發(fā)現(xiàn)上圖就是一個(gè) media 對(duì)象,無(wú)非一些小細(xì)節(jié)需要調(diào)整一下:

          <div class="media"> <div class="media-left"> <img src="..." /> </div> <div class="media-body media-middle"> <a href="...">請(qǐng)點(diǎn)擊登錄</a> </div></div>

          為了讓文字與圖片居中對(duì)齊,我們可以使用 Bootstrap 的.media-middle的輔助類。如果在工作中還要根據(jù)需求自定義一些輔助類調(diào)整細(xì)節(jié),當(dāng)然這是一個(gè)移動(dòng)端的例子,可以選擇移動(dòng)端框架相關(guān)的 media 對(duì)象。

          另外,在項(xiàng)目改版的時(shí)候,原始的方法的修改更是慘不忍睹,可以說(shuō)是噩夢(mèng),冗長(zhǎng)的 CSS 文件、混亂的功能劃分、類名、色值等等。最后也只能硬著頭皮一點(diǎn)一點(diǎn)修改。那一刻我才體會(huì)到框架的意義以及前端工具的重要性。我從工作中總結(jié)出,要么你可以熟練的使用某一個(gè)框架,要么就自己實(shí)現(xiàn)一個(gè)框架。

          前端框架對(duì)比

          目前市面上前端框架主要分重量級(jí)與輕量級(jí)。重量級(jí)主要有 Bootstrap、Semantic、UIkit、Foundation 等,輕量級(jí)有 Pure、Skeleton、Miligram 等。經(jīng)常關(guān)注前端動(dòng)態(tài)的工程師會(huì)發(fā)現(xiàn)輕量級(jí)框架每年都層出不窮。在我上面提到的主流輕量級(jí)框架之外還有很多類似的框架。

          我一直問(wèn)自己,為什么要重復(fù)造輪子。經(jīng)過(guò)研究,我發(fā)現(xiàn)這些輕量級(jí)框架其實(shí)大多都不能勝任工作需求,而且模仿的痕跡很重,基本上都或多或少的有 Bootstrap 的影子。那么這些輕量級(jí)框架有沒(méi)有意義呢?當(dāng)然有。但是就我個(gè)人觀點(diǎn),選擇輕量級(jí)框架反倒不如自己實(shí)現(xiàn)一個(gè)框架。因?yàn)榇蠖噍p量級(jí)框架就像是工作總結(jié),是根據(jù)自己的業(yè)務(wù)需求實(shí)現(xiàn)的。所以大多不具有通用性。

          前端框架的對(duì)比主要以 Bootstrap、Semantic、UIkit 為主,因?yàn)槲覀€(gè)人感覺(jué)這三個(gè)最具有代表性,而且設(shè)計(jì)風(fēng)格各有特色。Foundation 也有很多大公司在用,但以我個(gè)人觀點(diǎn),無(wú)論是框架的易用性還是設(shè)計(jì)風(fēng)格,相比其它幾個(gè)框架稍遜一籌。

          其中 Bootstrap 和 Semantic 是面向?qū)ο蟮淖詈皿w現(xiàn)。

          我先說(shuō)一下 Bootstrap 的優(yōu)勢(shì),不是設(shè)計(jì)風(fēng)格,不是模塊,不是特效,而是柵格,響應(yīng)式柵格。Bootstrap 的柵格在與其它框架對(duì)比中占有絕對(duì)優(yōu)勢(shì),無(wú)論是柵格的劃分還是類名的風(fēng)格都堪稱經(jīng)典。如果讀者有心看一下 Bootstrap 的 Less 源文件,就會(huì)感受到 Bootstrap 對(duì)于響應(yīng)式柵格的獨(dú)具匠心。其實(shí)在 Bootstrap 之前也有很多柵格方案,但是給人的感覺(jué)就是不夠利索,類名繁瑣不好記。而后來(lái)的很多框架,尤其輕量級(jí)的框架大多都有 Bootstrap 的影子。

          下面我們通過(guò)對(duì)比幾個(gè)框架的柵格和按鈕來(lái)看一下類命名的策略。

          Bootstrap

          <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div></div><button class="btn btn-primary" type="submit">Button</button>

          Semantic

          <div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div></div>

          <button class="ui primary basic button">Primary</button>

          Foundation

          <div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div></div>

          <button type="button" class="primary button">Primary</button>

          UIkit

          <div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div></div>

          <button class="uk-button uk-button-primary" type="button">Primary</button>

          Pure

          <div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div></div>

          <button class="pure-button pure-button-primary">A Primary Button</button>

          通過(guò)上面的對(duì)比,大家應(yīng)該已經(jīng)發(fā)現(xiàn)了這些框架的命名策略的不同。不可否認(rèn),Bootstrap 的命名最經(jīng)典。

          之前在網(wǎng)上看到有人討論關(guān)于框架的易用性,有人說(shuō) Bootstrap 的類名太長(zhǎng),然而通過(guò)上面幾個(gè)框架的對(duì)比,Bootstrap 的類并不繁瑣,而且用預(yù)處理器編寫框架時(shí)嵌套會(huì)比較靈活。

          Semantic 的類名最簡(jiǎn)潔,通過(guò)多個(gè)定語(yǔ)的修飾組成一句話,確實(shí)很有意思。但是過(guò)多的修飾類在編寫框架時(shí)會(huì)稍顯凌亂,有利有弊,因人而異吧。

          Foundation 的柵格應(yīng)該是最豐富的,策略上類似 Bootstrap,只是對(duì)公共屬性進(jìn)行了拆分,大家也可以看看其中的具體細(xì)節(jié)。

          UIkit 和 Pure 的策略相同,都加了前綴以區(qū)分其它框架,但是很顯然類名過(guò)于冗長(zhǎng)了。我在編寫框架時(shí)也這樣想過(guò),但是最終放棄了這種方式。

          關(guān)于 CSS 預(yù)處理器

          CSS 預(yù)處理器早已不是什么新鮮事,但是真正能夠在工作中運(yùn)用的人有多少呢?熟練使用預(yù)處理器特性的人又有多少呢?

          我之前工作的時(shí)候也沒(méi)有用預(yù)處理器,因?yàn)椴挥?,所以也意識(shí)不到預(yù)處理器的好處。主要是覺(jué)得麻煩,因?yàn)橐褂镁幾g器編譯一下,還不如直接寫 CSS 方便。但是在項(xiàng)目維護(hù)的時(shí)候就意識(shí)到預(yù)處理器的好處。

          后來(lái)在幾個(gè)項(xiàng)目中嘗試了預(yù)處理器,但是對(duì)于模塊化的寫法不太明確。預(yù)處理器作為工具,可以實(shí)現(xiàn)模塊化編寫 CSS,那么應(yīng)該如何劃分模塊?另外,預(yù)處理器有很多特性,但是大多數(shù)人剛開(kāi)始只用到變量和嵌套,其它的特性幾乎很少用到。我相信在自己動(dòng)手實(shí)現(xiàn)一個(gè)輕量級(jí)框架的過(guò)程中,我們可以對(duì)預(yù)處理器有一個(gè)全面的了解。

          目前流行的預(yù)處理器有 Less,Sass,Stylus 三個(gè),選擇哪個(gè)完全是看自己的習(xí)慣。我最開(kāi)始因?yàn)?Bootstrap 了解的 Less,但是因?yàn)榱?xí)慣選擇了 Sass,其次 Sass 的功能要更全面一些。

          無(wú)論是工作還是自己寫項(xiàng)目,都要搭建一個(gè)項(xiàng)目環(huán)境,也就是安裝一系列的 npm 包。相比刀耕火種的開(kāi)發(fā)方式,使用工具開(kāi)發(fā)的前期準(zhǔn)備過(guò)程稍顯麻煩,然而一旦環(huán)境建好,后期的開(kāi)發(fā)將會(huì)游刃有余。

          Miligram 這個(gè)輕量級(jí)框架在 Github 上有很高人氣,但是說(shuō)實(shí)話,用處并不大。不過(guò)這個(gè)框架的構(gòu)建方式非常值得學(xué)習(xí)。雖然 CSS 對(duì)于很多人來(lái)說(shuō)很簡(jiǎn)單,但是真要去寫一個(gè)框架,還是非常棘手,這時(shí)候就需要借鑒一些優(yōu)秀的框架。

          編寫框架大致會(huì)用到的 npm 如下:

          --autoprefixer--node-sass--npm-run-all--rimraf--onchange

          其實(shí)最主要的就是一個(gè) node-sass,其它的都是輔助 CSS 文件的生成修改,大家感興趣的話可以去 npm 官網(wǎng)搜索這些插件,了解具體用法,如有不懂可以給我留言,我就不啰嗦了。

          編寫輕量級(jí)框架

          終于到了本篇文章的重頭戲。

          簡(jiǎn)單介紹一下,我給自己編寫的框架取名 Snack,原意“快餐”,主要表達(dá)簡(jiǎn)單之意。雖然是輕量級(jí)框架,但我并不想拿輕量級(jí)做為噱頭,畢竟體量輕意味著某些功能的缺失以及疏漏。這個(gè)框架的意義更多的是交流學(xué)習(xí),我試圖借鑒其它框架的優(yōu)秀之處,盡量簡(jiǎn)化類名,以及嘗試探索一些更通用的組件。

          大多數(shù)的輕量級(jí)框架只是 CSS 框架,不涉及 JS 部分,主要用于網(wǎng)頁(yè)的布局。我之所以打算自己編寫框架,是因?yàn)楣ぷ髦兄貜?fù)的東西太多,通過(guò)框架可以很好的將這些零散組件整合到一起。另一方面,寫個(gè)小項(xiàng)目,學(xué)點(diǎn)新知識(shí)是一件趣事。

          編寫框架是去年想做的事情,但因?yàn)闀r(shí)間原因,拖了很久。寫框架之初我曾陷入一個(gè)誤區(qū),我打算設(shè)計(jì)一些比較前衛(wèi)的樣式,立體的按鈕、浮動(dòng)的面板等,比如下圖中的風(fēng)格。

          https://dribbble.com/shots/524593-Soft-Interface-Black

          但是在斷斷續(xù)續(xù)編寫框架的過(guò)程中,我逐漸找到了方向,上圖的樣式只是一種皮膚,編寫框架之初不應(yīng)該把重點(diǎn)放在這上面。當(dāng)然,好的 UI 設(shè)計(jì)也是框架成功的一部分。

          模塊劃分

          編寫框架的第一步就是要確定框架應(yīng)該包含哪些模塊。因?yàn)槭禽p量級(jí)框架,所以模塊肯定沒(méi)有重量級(jí)框架那么全面,只有核心的一些組件。通過(guò)比較一些輕量級(jí)框架以及工作總結(jié),大致常用的模塊包括柵格、媒體、按鈕、排版、表單、表格、面板以及輔助工具。

          在常用的這幾個(gè)組件中,需要重點(diǎn)關(guān)注的是柵格、表單及面板,媒體組件也很重要,但是自由發(fā)揮的空間不大,我直接用了 Bootstrap 的媒體組件。

          命名策略

          首先是類命名的層次與結(jié)構(gòu)。類命名一直是我比較糾結(jié)的地方,剛開(kāi)始工作的時(shí)候?yàn)榱似鹨粋€(gè)見(jiàn)名知意又簡(jiǎn)潔的類名總是抓耳撓腮。我在編寫框架時(shí)盡量避免與 Bootstrap 的類名重疊,但也不能完全避免。對(duì)比其他框架會(huì)發(fā)現(xiàn),這種情況不可避免的會(huì)出現(xiàn),畢竟類名會(huì)有一定的規(guī)律性以及層次性。在這一點(diǎn)上我比較喜歡 Bootstrap 的風(fēng)格。下面和 Bootstrap 的表單做一個(gè)對(duì)比。

          Bootstrap 的表單結(jié)構(gòu)及類名

          --div.form-horizontal --div.form-group --label.control-label --input.form-control

          Snack 的表單結(jié)構(gòu)及類名

          --div.form-row --div.form-item --label.form-label --input.form-field

          這個(gè)表單結(jié)構(gòu)整體而言還算不錯(cuò),只是個(gè)別地方需要修改。有一些框架不給input等元素起類名,而是給父元素一個(gè)類名,個(gè)人對(duì)這種做法表示疑問(wèn),不起類名會(huì)降低框架編寫及使用的靈活性。

          第二個(gè)策略是組件的修飾,比如按鈕及面板都存在多個(gè)語(yǔ)境(顏色、大小等),在這一點(diǎn)上我編寫框架時(shí)做了一些簡(jiǎn)化,風(fēng)格上有些 Semantic 的影子。

          <button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes primary">...</div>

          關(guān)于修飾類的策略是一個(gè)仁者見(jiàn)仁智者見(jiàn)智的問(wèn)題,至于哪種方法更好,還需要在編寫框架的過(guò)程中摸索。

          柵格系統(tǒng)

          演示示例: https://nzbin.github.io/snack/#grid

          任何框架必須建立在柵格的基礎(chǔ)上才能靈活布局。我在前面提到了 Bootstrap 的精華就是柵格系統(tǒng)。柵格系統(tǒng)的編寫需要使用預(yù)處理器的循環(huán)功能,否則就要做無(wú)謂的重復(fù)勞動(dòng)了。我遇到過(guò)一些輕量級(jí)框架是用 Less 編寫的,其柵格系統(tǒng)就沒(méi)有用循環(huán),這樣的源碼稍顯唐突,可能是作者對(duì) Less 的循環(huán)功能不熟,當(dāng)然 Less 本身的循環(huán)比較弱,用起來(lái)有些別扭。

          關(guān)于預(yù)處理器的循環(huán),可以參照我之前翻譯的 《CSS 預(yù)處理器中的循環(huán)》,比較詳細(xì)地對(duì)比了三種流行預(yù)處理器的循環(huán)功能。簡(jiǎn)單說(shuō)一下,Less 沒(méi)有循環(huán),但可以用遞歸實(shí)現(xiàn),而 Sass 和 Stylus 有真循環(huán)。

          我編寫的柵格系統(tǒng)也是默認(rèn) 12 列,但是后來(lái)發(fā)現(xiàn) 12 列的柵格缺少最常用的列寬(比如 10%、20%、30%等),比如下面 CodePen 展示的例子用 12 列柵格是無(wú)法完成的,所以我又添加了 10 列柵格,但仍然無(wú)法面面俱到,不過(guò)已經(jīng)很靈活了。

          柵格的使用和 Bootstrap 是一樣的,除了 12 列柵格外,10 列柵格以及均分柵格都要添加.cols-

          <!-- 默認(rèn) 12 列柵格,所以省略 cols-12 --><div class="row"> <div class="col-5"></div> <div class="col-7"></div></div>

          <!-- 10 列柵格 --><div class="row cols-10"> <div class="col-3"></div> <div class="col-7"></div></div>

          這個(gè)柵格并沒(méi)有響應(yīng)式,只有一個(gè)斷點(diǎn),小屏手機(jī)上的話所有柵格都會(huì)單行顯示。一方面,這樣的設(shè)計(jì)符合大多數(shù)輕量級(jí)框架的初衷;另一方面,我打算再寫一個(gè)針對(duì)移動(dòng)端的框架,畢竟 Web 端和移動(dòng)端的風(fēng)格差距較大,按照業(yè)務(wù)需求分開(kāi)會(huì)更好。不過(guò)最近我更改了源文件,為響應(yīng)式預(yù)留了擴(kuò)展方式。

          表單

          演示示例: https://nzbin.github.io/snack/#forms

          在上面的命名策略中已經(jīng)展示了 Snack 表單的基本結(jié)構(gòu),基本表單除了結(jié)構(gòu)之外,樣式上并沒(méi)有太多可以討論的地方。在此說(shuō)一下表單中checkbox的結(jié)構(gòu)調(diào)整,先看一下 Bootstrap 的checkbox結(jié)構(gòu)。

          <!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label></div>
          <!-- checkbox-inline --><label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox</label>

          以上兩種結(jié)構(gòu)不能有偏差,稍有偏差樣式就會(huì)錯(cuò)亂,靈活性較差。其次我在想兩種結(jié)構(gòu)能不能整合在一起,增強(qiáng)靈活性。想了很久,找到了方法,Snack 結(jié)構(gòu)如下:

          <!-- checkbox --><div class="checkbox"> <label> <input type="checkbox" value=""> checkbox </label></div>
          <!-- checkbox-inline --><div class="checkbox inline"> <label> <input type="checkbox" value=""> checkbox </label></div>

          也可以將樣式直接加到label標(biāo)簽上。另外,如果將input移到label標(biāo)簽外也是沒(méi)有問(wèn)題的,如下:

          <!-- checkbox --><div class="checkbox"> <input type="checkbox" id="checkbox1" value=""> <label for="checkbox1">checkbox</label></div>
          <!-- checkbox-inline --><div class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value=""> <label for="inlineCheckbox1">checkbox</label></div>

          這種結(jié)構(gòu)有一個(gè)好處,就是可以自定義input樣式,詳見(jiàn)下面的 CodePen 的scss文件。radio的設(shè)置和checkBox是一樣的。

          輔助類

          輔助類是一系列類的組合,比如字號(hào)大小、顏色值、padding、margin 以及左右浮動(dòng)等。在一些 Bootstrap 搭建的后臺(tái)管理系統(tǒng)中尤為常見(jiàn),這樣布局起來(lái)就會(huì)比較靈活。以下是一個(gè)邊框的輔助類。

          .border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee;}.border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee;}.border-left { border-left: 1px solid #eee;}.border-right { border-right: 1px solid #eee;}.border-top { border-top: 1px solid #eee;}.border-bottom { border-bottom: 1px solid #eee;}

          關(guān)于助類的更多內(nèi)容可以搜索閱讀這篇文章《如何編寫通用的 Helper Class》

          盒組件

          演示示例: https://nzbin.github.io/snack/#boxes

          盒組件是我整個(gè)框架中比較滿意的一個(gè)模塊。之所以要做這個(gè)組件主要是覺(jué)得 Bootstrap 的 list 組件和 panel 組件可以整合到一起。當(dāng)然,這樣的做法有利有弊。盒組件在后臺(tái)管理系統(tǒng)的布局中表現(xiàn)的尤為突出。

          其命名也是多種多樣,比如 panel、widget、portlet、ibox、card等,每個(gè)后臺(tái)管理系統(tǒng)框架都會(huì)對(duì)這個(gè)組件進(jìn)行深度開(kāi)發(fā),可見(jiàn)其在布局上的重要性。給一個(gè)組件起一個(gè)合適的類名也很關(guān)鍵,想了很久,最后用了box的類名,當(dāng)然一般情況下盡量不要用box,因?yàn)檫@個(gè)類名比較寬泛。下面的 CodePen 模擬了 Bootstrap 的 list 及 panel 組件。

          主題

          給框架添加主題是一件有趣的事情。Snack 的默認(rèn)主題是白色,因?yàn)橄矚g黑色,最后添加了暗夜主題,編寫主題只需改變組件的顏色。演示文檔 的頁(yè)面用了暗夜主題,點(diǎn)擊上方的紅色按鈕可以切換主題。

          總結(jié)

          如果大家問(wèn)我那個(gè)框架更好,我會(huì)毫不猶豫的選擇 Bootstrap。在工作中可以根據(jù)需求的難易進(jìn)行框架選擇,如果業(yè)務(wù)比較重,最好根據(jù) Bootstrap 進(jìn)行二次開(kāi)發(fā);反之,可以選擇一些輕量級(jí)框架,最好還是根據(jù)自己的需求造輪子,如果大家愿意選擇或是借鑒我的框架,那會(huì)是我的榮幸。

          Github: https://github.com/nzbin/snack

          Docs: https://nzbin.github.io/snack

          何使用 <noframes> 標(biāo)簽

          本例演示:如何使用 <noframes> 標(biāo)簽。

          <html>
          <frameset cols="25%,25%,25%">
           <frame src="/example/html/frame_a.html">
           <frame src="/example/html/frame_b.html">
           <frame src="/example/html/frame_c.html">
          <noframes>
          <body>您的瀏覽器無(wú)法處理框架!</body>
          </noframes>
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          混合框架結(jié)構(gòu)

          本例演示如何制作含有三份文檔的框架結(jié)構(gòu),同時(shí)將他們混合置于行和列之中。

          <html>
          <frameset rows="50%,50%">
          <frame src="/example/html/frame_a.html">
          <frameset cols="25%,75%">
          <frame src="/example/html/frame_b.html">
          <frame src="/example/html/frame_c.html">
          </frameset>
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

          本例演示 noresize 屬性。在本例中,框架是不可調(diào)整尺寸的。在框架間的邊框上拖動(dòng)鼠標(biāo),你會(huì)發(fā)現(xiàn)邊框是無(wú)法移動(dòng)的。

          <html>
          <frameset cols="50%,*,25%">
           <frame src="/example/html/frame_a.html" noresize="noresize" />
           <frame src="/example/html/frame_b.html" />
           <frame src="/example/html/frame_c.html" />
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          導(dǎo)航框架

          本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個(gè)將第二個(gè)框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個(gè)鏈接。

          <html>
          <frameset cols="120,*">
           <frame src="/example/html/html_contents.html" >
           <frame src="/example/html/frame_a.html" name="showframe">
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          內(nèi)聯(lián)框架

          本例演示如何創(chuàng)建內(nèi)聯(lián)框架(HTML 頁(yè)中的框架)。

          <html>
          <body>
          <iframe wigth="200" height="100" src="/i/eg_landscape.jpg"></iframe>
          <p>一些老的瀏覽器不支持 iframe。</p>
          <p>如果得不到支持,iframe 是不可見(jiàn)的。</p>
          </body>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          跳轉(zhuǎn)至框架內(nèi)的一個(gè)指定的節(jié)

          本例演示兩個(gè)框架。其中的一個(gè)框架設(shè)置了指向另一個(gè)文件內(nèi)指定的節(jié)的鏈接。這個(gè)"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C9"> 進(jìn)行標(biāo)識(shí)。

          <html>
          <frameset cols="20%,80%">
           <frame src="/example/html/frame_a.html">
           <frame src="/example/html/link.html#C9">
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

          本例演示兩個(gè)框架。左側(cè)的導(dǎo)航框架包含了一個(gè)鏈接列表,這些鏈接將第二個(gè)框架作為目標(biāo)。第二個(gè)框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。

          <html>
          <frameset cols="200,*">
          <frame src="/example/html/content.html">
          <frame src="/example/html/link.html" name="showframe">
          </frameset>
          </html>
          

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          HTML基礎(chǔ)教程:框架實(shí)例大合集

          希望以上可以解決你們心中的一些疑惑,其中可能會(huì)有不對(duì)的地方或是需要改進(jìn)的地方,歡迎留言糾正。感覺(jué)還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦


          主站蜘蛛池模板: 少妇激情一区二区三区视频| 一区二区三区视频免费| 日本一区二区三区在线看| 中文字幕不卡一区| 日本精品一区二区三本中文| 亚洲AV无码一区二区三区系列| 福利片福利一区二区三区| 亚洲av乱码中文一区二区三区| 国产在线精品一区二区高清不卡| 国产一区中文字幕在线观看| 无码人妻久久一区二区三区免费丨| 人妻少妇久久中文字幕一区二区| 伊人色综合一区二区三区| 91国在线啪精品一区| 精品一区二区三区四区在线| 国产成人一区在线不卡| 亚洲美女高清一区二区三区 | 国产成人精品一区二区三区无码| 高清在线一区二区| 痴汉中文字幕视频一区| 午夜精品一区二区三区在线视| 亚洲国产成人久久一区WWW| 激情爆乳一区二区三区| 国产另类ts人妖一区二区三区| 亚洲AV成人精品日韩一区18p| 亚洲一区二区三区乱码A| 久久国产精品免费一区| 上原亚衣一区二区在线观看| 红桃AV一区二区三区在线无码AV| 夜夜添无码一区二区三区| 无码国产精品一区二区免费3p | 亚洲欧美成人一区二区三区| 亚洲精品无码一区二区| 国产精品一区电影| 久久精品中文字幕一区| 无码日韩精品一区二区三区免费| 亚洲一区欧洲一区| 欧洲精品码一区二区三区免费看| 精品久久久久一区二区三区 | 日韩精品无码一区二区三区免费 | 亚洲AV无码一区二区三区系列|