html5 移動開源框架有哪些

很久以前整理了篇將手機網(wǎng)站做成手機應用的JS框架。時隔一年多，很多新的技術已經(jīng)出現(xiàn)，下面再來總結(jié)下還有哪些框架是適合面向手機設備的開發(fā)的。

創(chuàng)新互聯(lián)建站基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)雅安電信機房，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

1、jQuery Mobile

jQuery Mobile 是 jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發(fā)團隊說：能開發(fā)這個項目，我們非常興奮。移動Web太需要一個跨瀏覽器的框架，讓開發(fā)人員開發(fā)出真正的移動Web網(wǎng)站。

2、jQTouch

jQTouch 是一個 jQuery 的插件，主要用于手機上的 Webkit 瀏覽器上實現(xiàn)一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的 JavaScript 庫。支持包括 iPhone、Android 等手機。

3、DHTMLX Touch

DHTMLX Touch是一個免費的HTML5/JavaScript框架，專門為觸摸屏設備而優(yōu)化。為您帶來快速開發(fā)工藝精美的移動Web應用程序的能力。DHTMLX Touch UI Designer是一個可視化的編輯器用于構(gòu)建移動用戶界面。它能夠幫您以最少的編碼構(gòu)建一流的用戶界面。在其主頁上提供一些示例可以展示DHTMLX Touch強大的用戶界面。包括一個menu app for the iPad (適用于開發(fā)餐廳應用) 和Book Shop (一個電子書店應用)。

4、Mobilize.js

Mobilize.js是一個開源的HTML5-JavaScript框架用于從任何現(xiàn)在有標準網(wǎng)站快速，簡便地構(gòu)建移動網(wǎng)站。這個框架其實就是將需要在移動設備上顯示的部分頁面以jQuery Mobile的默認主題顯示，而不是實現(xiàn)一個全新完整的移動頁面。Mobilize.js 可用于任意網(wǎng)站，但對于基于WordPress和Sphinx的網(wǎng)站不需要使用該框架轉(zhuǎn)換，因為已經(jīng)有非常多的插件可以使用。

5、The M Project

The-M-Project是另外一個強大的JavaScript框架，它利用HTML5新的特性來更好和更簡便地開發(fā)移動應用。這個框架遵循著名的MVC軟件架構(gòu)模式。它還支持離線，所以你的用戶可以在沒有連接網(wǎng)絡的情況下繼續(xù)操作(當下次有連線的時候，再將數(shù)據(jù)同步到服務器中)。提供優(yōu)秀的文檔(這個項目擁有一個引導新用戶入門的開發(fā)指南)?？梢圆榭刺峁┑氖纠齺韺υ擁椖坑幸粋€初目的了解。這些示例包括：ToDo App(待辦事項目應用) 和 KitchenSink (這個示例包括這個框架提供的所有UI元素)。

6、WebApp.Net

WebApp.Net 提供了很多的 API，因此可以幫助你節(jié)省很多工作了。不需要花時間去進行 Ajax 調(diào)用的編碼，因為已經(jīng)內(nèi)置了，另外還有很多其它內(nèi)置功能，提供了詳細的文檔和應用演示。

7、Wijmo

Wijmo是一個基于jQuery UI的UI部件的套件。Wijmo部件進行了優(yōu)化客戶端Web開發(fā)和利用jQuery的優(yōu)越的性能和易用性的力量。所有的Wijmo部件都配備了20多個主題和支持ThemeRoller。

8、960 Grid on jQuery-Mobile

jquery-mobile-960 是一個用于移動 Web 開發(fā)的網(wǎng)格框架，綜合了 960.gs 的靈活性和 jQuery Mobile 的方便性。它的目的是讓 jQuery Mobile 布局更加的靈活，使得應用應許在移動終端更加易用。

9、Sencha Touch Framework

Sencha Touch 是世界上第一個基于 HTML5 的移動 Web 開發(fā)框架，支持最新的 HTML5 和 CSS3 標準，全面兼容 Android 和 Apple iOS 設備，提供了豐富的 WEB UI 組件，可以快速的開發(fā)出運行于移動終端的應用程序。Shencha是第一個使用HTML5，CSS和JavaScript并且支持音頻/視頻，本地存儲，圓角，漸變背景以及陰影的開發(fā)框架。

10、NimbleKit

NimbleKit 是為 iOS 設備構(gòu)建應用程序最快速的方式，你不需要知道 Objective-C 或者 iOS SDK，你只需結(jié)合 JavaScript 代碼編寫 HTML 頁面就可以了。

11、Touchy? Boilerplate

Touchy Boilerplate 是一個用來創(chuàng)建移動web app，包括HTML模板，Meta tag等的工具。Touchy可以支持動態(tài)頁面導航，固定頁頭，滾動內(nèi)容，瀏覽歷史記錄等功能。Touchy使用jQuery或者 Zepto.JS。

12、PhoneGap

PhoneGap是一個用基于HTML，CSS和JavaScript的，創(chuàng)建移動跨平臺移動應用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯(lián)系人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如iPhone的iPhone SDK，Android的Android SDK等，也可以和DW5.5配套開發(fā)。使用PhoneGap只比為每個平臺分別建立應用程序好一點點，因為雖然基本代碼是一樣的，但是你仍然需要為每個平臺分別編譯應用程序。

13、joshfire

Joshfire是一個開源的跨設備開發(fā)框架，幫助開發(fā)者創(chuàng)建可以在多種設備上運行的web app。它使用HTML5和JavaScript，并且允許開發(fā)者快速整合本地應用和特定的web應用。Joshfire可以讓你的應用接受鍵盤，鼠標，觸摸屏，遙控器等設備的輸入。Joshfire支持Node.JS。4.Sencha Touch：基于HTML5的移動網(wǎng)頁開發(fā)框架。

14、 Julia

Julia框架由基本CSS3文件、JS庫和各個平臺的運行庫構(gòu)成。不像PhoneGap，Julia不僅僅包含調(diào)用本機代碼的接口層，它還包含 Model-View-Controller(MVC)支持，Delegation支持，OAuth支持，異步數(shù)據(jù)庫存取接口，HTML選擇符(類jQuery調(diào)用接口)，HTML模版(允 許嵌入JS代碼)等應用開發(fā)必備的API接口。 基于Julia的應用開發(fā)就像網(wǎng)站開發(fā)那么簡單，是的，你終于可以用HTML5開發(fā)一個完整的、跨平臺 的、不亞于本機代碼的、易于維護的移動應用了！大幕即將揭曉，讓我們一起進入移動開發(fā)的新時代

15、SproutCore HTML5 Application Framework

SproutCore 是一個 HTML5 移動 Web 開發(fā)框架，它的目標是在無需瀏覽器插件的情況下，在瀏覽器中位應用程序提供極佳的桌面效果。

16、Titanium

這是一個強大的，健壯的移動Web開發(fā)框架。能夠讓使用現(xiàn)有的HTML, CSS和JavaScript知識來為 iOS和Android平臺開發(fā)原生移動應用。作為一個越來越大的移動Web框架，它擁有超過300個的APIs和活躍的開發(fā)者社區(qū)。你從這個社區(qū)中得到每一個開發(fā)人員的幫助。Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。它提供能夠與移動設備的攝像頭和本地文件存儲系統(tǒng)相交互的特性。

17、Lungo.js

Lungo.js 是一個采用HTML5, CSS3 和JavaScript技術實現(xiàn)的移動Web應用程序開發(fā)框架。利用這框架開發(fā)的應用程序可運行所有流行的平臺包括：iOS, Android, Blackberry 和 WebOs。它還支持觸摸事件如：tap, double-tap和swipe。整個框架沒有用到任何圖片包括圖標，所有都矢量化?？梢栽谶@個框架中使用HTML5擁有的一些特性如：WebSQL, 地理位置定位，歷史或設備方向等。Lungo.js是一個模塊化并且完全可定制的框架。

18、xui.js

有時候你可能需要一個超輕量級的框架，只要擁有用于開發(fā)標準客戶端所需要的功能如：DOM操作，事件處理，Ajax和一些動畫效果。如果是這樣的話，這個框架剛好非常適合你。整個框架采用GZIP壓縮完之后只有4.2 KB。

19、EmbedJS

EmbedJS是一個用于嵌入式設備的JavaScript框架如：移動電話，TVs、tablets和so forth。EmbedJS強大之處在于，它擁有專門為特定平臺和瀏覽器如iOS, Firefox, Android等提供相應的開發(fā)版本。這樣就能夠以最少的代碼，為用戶提供最佳的體驗。而且假如你喜歡自己定制，可以利用其提供的EmbedJS Build tool工具實現(xiàn)。EmbedJS基于Dojo實現(xiàn)，所以你如果熟悉Dojo API語法，那EmbedJS將是你最佳的選擇。

20、zepto.js

zepto.js是一個專為mobile WebKit瀏覽器(如：Safari和Chrome)而開發(fā)的一個JavaScript框架。它標榜自己在其簡約的開發(fā)理念，能夠幫助開發(fā)人員簡單、快速地完成開發(fā)交付任務。更重要的是這個JS框架，是超輕量級的，只有5KB。zepto.js的語法借鑒并且兼容jQuery。

21、Baker

Baker是用來在iPad或者iPhone平臺上發(fā)布交互式的電子書或者電子雜志的HTML5電子書框架。

22、ChocolateChip-UI

ChocolateChip-UI 是一個手機移動 Web 開發(fā)框架，采用 HTML5, WAML, CSS 和 JavaScript等技術實現(xiàn)?；?ChocolateChip JavaScript 框架，包含最新的 ChUI.JS 和 ChUI.css.

23、Magazine Grid

Magazine Grid 是一個超現(xiàn)代的 CSS 框架，用于 iPad 和 iPhone 手機，使用類似雜志的設計風格。Magazine Grid 可讓用戶使用 HTML5 元素來組織雜志頁，非常輕量級(4k)，在移動設備上加載非?？?，對老的瀏覽器也支持。

24、Kendo UI

Kendo UI是一個強大的框架用于快速HTML5 UI開發(fā)。基于最新的HTML5、CSS3和JavaScript標準。 Kendo UI包含了開發(fā)現(xiàn)代JavaScript開發(fā)所需要的所有一切，包括：強大的數(shù)據(jù)源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控件。

25、HTML App Host Framework

這是一個用于構(gòu)建基于 Windows Phone 7 的 HTML/JavaScript 托管框架，使用 HTML5 技術。該框架由支持在標準 xap 格式中嵌入 html 應用的控件。

html5開發(fā)用什么工具好

一、Adobe Edge

目前還處于預覽階段的Adobe Edge是用HTML5、CSS、JavaScript開發(fā)動態(tài)互動內(nèi)容的設計工具。內(nèi)容可以同時兼容移動設備和桌面電腦。Edge的一個重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構(gòu)一致性，此外Edge還將整合TypeKit這樣的字體服務。

動畫和圖形可以添加到HTML元素中，程序也能通過Edge自身的代碼片段庫或者JavaScript代碼進行擴展。動畫可以在獨立的時間線上進行嵌套，還能實現(xiàn)互動功能。符合可以服用并通過API和代碼片段控制。通過Edge設計的內(nèi)容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器。

二、Adobe Dreamweaver CS6

Adobe Dreamweaver CS6作為一個Web設計軟件，提供了對HTML網(wǎng)站和移動程序的可視化編輯界面。其Fluid Grid排版系統(tǒng)整合CSS樣式表功能，提供自適應版面的跨平臺兼容性。開發(fā)者可以完全實現(xiàn)Web設計的可視化操作，無需為代碼所困。

用戶不但還能在Live View中預覽，還提供多屏幕預覽功能。開發(fā)者可以通過MultiScreen預覽面板查看HTML5內(nèi)容的渲染效果。Live View通過WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用來開發(fā)企業(yè)Web程序的服務器端技術，通過Websockets、互動表單、視頻和地理標簽等HTML5技術創(chuàng)建富媒體用戶體驗。

四、Sencha Architect 2

在開發(fā)移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發(fā)。開發(fā)團隊可以在一個單一集成的環(huán)境中完成應用的設計、開發(fā)和部署。開發(fā)者還可以開發(fā)Sencha Touch2和Ext JS4 JavaScript應用，并實時預覽。

五、Sencha Touch 2

Sencha Touch2是移動應用框架，也被看作是Sencha的HTML5平臺。開發(fā)者可以用它開發(fā)面向iOS、Android和Blackberry、Kindle Fire等多種平臺的移動應用。

六、Dojo Foundation Maqetta

來自于IBM的一個項目，Dojo Foundation Maqetta是為桌面和移動設備開發(fā)HTML5應用的開源工具，支持在瀏覽器中查看HTML5界面。用戶體驗設計師可以通過拖放組裝UI樣板

七、微軟Visual Studio 2010 ServicePack 1

雖然一開始并不支持HTML5，但微軟在2011年三月發(fā)布的Visual Studio 2010 SP1中提供了IntelliSense，追加了針對HTML5的一些元素。

八、JetBrains WebStorm 4.0

作為擁有HTML編輯器的JavaScript集成開發(fā)環(huán)境，WebStorm4.0提供了開發(fā)web應用的HTML5樣板。開發(fā)者可以在創(chuàng)建HTML文檔時可獲得對HTML5文件的支持。例如砍伐者鍵入。開發(fā)者還可以在chrome瀏覽器中實時預覽HTML文檔。

九、Google Web Toolkit

該開發(fā)工具用于開發(fā)瀏覽器應用，但庫中支持很多HTML5功能。包括對客戶端或web存儲的支持。其他HTML5功能還包括支持Canvas可視化，以及音頻和視頻widget。

html5 浮動側(cè)滑菜單欄怎樣實現(xiàn)

一共有4種側(cè)滑動畫特效。這款CSS3菜單的特點是鼠標劃過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由CSS3中的transition-delay屬性來完成

style type="text/css"

/*Fontawesome Iconfont*/

@import url();

@import url();

* {margin: 0; padding: 0;}

li {list-style-type: none;}

.grid {float: left;width:980px;margin: 0 auto;}

.grid li { width: 285px; height: 500px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }

.grid li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}

.gridli section {position: relative; transition: all 0.25s; width: 100%;}

.gridli h2 {font: bold 14px montserrat; color: #fff; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top: 100px; padding: 10px 0; border: 2px solid white; border-radius: 4px;}

.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}

.sidenav li { _overflow: hidden; width: 150px; }

.sidenav a { text-decoration: none; color: #eee; display: block; line-height: 48px; }

.sidenav span {display: block;}

.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }

.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }

/*All instances*/

.gridli:hover .sidenav {width: 150px;}

.gridli:hover section {margin-left: 150px;}

.gridli:hover b {opacity: 1;}

.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}

.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}

.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}

.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}

.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}

.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}

/*Three*/

.three .w {transform: perspective(100px) translateZ(-24px);}

.three b {transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5); }

.three:hover b {transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: transparent;}

.three .sidenav {width: 150px;}

/*Two*/

.two .w {transform: perspective(100px) translateZ(-24px);}

.two b {transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5); opacity: 0; }

.two:hover b {transform: perspective(100px) rotateX(0) translateZ(24px) scale(1); transition: all .4s; opacity: 1;}

.two .sidenav {width: 150px;}

/*One*/

.one .w {transform: perspective(100px);}

.one b {transform: perspective(100px) rotateY(90deg); _opacity: 0; transform-origin: left center; _border: 1px solid white;}

.one:hover b {transform: perspective(100px) rotateX(0); transition: all .4s; opacity: 1;}

.one .sidenav {width: 150px;}

.one .sidenav span {float: left; width: 100px;}

/style

!--[if IE]

script src=""/script

![endif]--

/head

body

div class="htmleaf-container"

header class="htmleaf-header bgcolor-11"

div class="htmleaf-demo center"

a href="index.html"DEMO1/a

a href="index2.html" class="current"DEMO2/a

a href="index3.html"DEMO3/a

a href="index4.html"DEMO4/a

/div

div style="text-align:center;clear:both;"

script src="/gg_bd_ad_720x90.js" type="text/javascript"/script

script src="/follow.js" type="text/javascript"/script

/div

/header

div class="htmleaf-content bgcolor-8"

ul class="grid"

li class="one"

ul class="sidenav"

liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li

liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li

liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li

liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li

liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li

liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li

/ul

section

h2Door Opening/h2

img src="img/mb1.png"/

/section

/li

li class="two"

ul class="sidenav"

liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li

liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li

liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li

liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li

liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li

liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li

/ul

section

h2Flip Down/h2

img src="img/mb2.png"/

/section

/li

li class="three"

ul class="sidenav"

liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li

liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li

liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li

liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li

liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li

liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li

/ul

常見的HTML5工具有哪些

推薦我們的 Epub360，專業(yè)H5頁面制作工具，可以靈活制作邀請函、小游戲、招聘、節(jié)日賀卡等多種類型。

關于編輯器專業(yè)能力

專業(yè)交互功能

支持專業(yè)級動畫控制、交互設定、社交應用與數(shù)據(jù)應用，保障企業(yè)的商業(yè)需求順利實現(xiàn)。

操作簡易、流暢

采用由簡到難遞進式產(chǎn)品設計模式，效果組件化，減少用戶上手難度，穩(wěn)定的操作環(huán)境助力企業(yè)持續(xù)創(chuàng)意輸出。

提供企業(yè)/媒體培訓和定制服務

我們?yōu)槠髽I(yè)/媒體單位提供H5工具培訓及定制服務，定制服務包含掃碼簽到、大屏互動、H5游戲等多種場景，是上海解放日報、招商銀行、廣西日報等多家單位長期合作伙伴。

提供優(yōu)質(zhì)模板庫

提供豐富的模板庫，500+優(yōu)質(zhì)的企業(yè)H5模板，各種邀請函、招聘、節(jié)日海報、H5小游戲應有盡有。

提供私有化部署服務

上海意派科技的私有化部署系統(tǒng)功能架構(gòu)覆蓋功能層、服務層、系統(tǒng)支撐層三個層級。

功能層：

H5內(nèi)容管理、H5編輯器、H5發(fā)布管理、H5訪問統(tǒng)計、H5數(shù)據(jù)收集、素材資源管理、表單管理、數(shù)據(jù)庫定義、個人賬號信息管理。

服務層：

用戶管理、素材資源管理、H5作品管理、作品播放、表單管理、數(shù)據(jù)庫管理、訪問統(tǒng)計、微信jssdk、微信授權、H5互動數(shù)據(jù)處理、數(shù)據(jù)庫服務、語音、圖片處理、消息列隊。

系統(tǒng)支撐層：

Django應用服務器、MySQL 數(shù)據(jù)庫存儲、MongoDB、Redis 內(nèi)存數(shù)據(jù)庫、Memcache 緩存、OSS文件存儲、OpenSearch、Celery 列隊

對比一些簡易化的模板平臺，意派Epub360 H5平臺可以使用更專業(yè)的組件，創(chuàng)造更多創(chuàng)意的可能，更大的創(chuàng)作自由空間以及更多的營銷數(shù)據(jù)效果。

如何解決HTML5在實際應用中的兼容性問題

1.可以通過個人pc固定的瀏覽器，這些瀏覽器都有自身的內(nèi)核，可以強制性的使用。就不存在兼容性問題。這種辦法一般可以用在辦公室的場景。但是在巨大的瀏覽器市場里面，想要約束或者強制網(wǎng)民使用某一款瀏覽器是做不到的，這樣子指揮帶給客戶非常不好的印象和丟失一大批的客戶。

對于辦公場景，現(xiàn)在員工使用的網(wǎng)絡人數(shù)有限，不像普通市民擁有好記憶的網(wǎng)民。因此我們必須花費時間去測試建通和修復這樣的難題。我們應該可以針對于網(wǎng)名做相應的優(yōu)化。但是在公司辦公的時候，我們應該強制使用具有安全認證的固定瀏覽器，可以減少開發(fā)的工作量，還可以防止數(shù)據(jù)泄露和木馬入侵。達到保障企業(yè)數(shù)據(jù)安全，事半功倍的效果。

3

2.面對不同瀏覽器的兼容問題，所有的H5都是基于框架來開發(fā)的?，F(xiàn)在行業(yè)中主流的UI框架有很多，比如國內(nèi)的Amaze。基于這些框架來設計網(wǎng)站可以減少大量的兼容瀏覽器的調(diào)試工作。很多的UI框架都是具有十分優(yōu)美的審美觀，還能夠通過網(wǎng)民的習慣和喜好和相應主流的瀏覽器做大量的優(yōu)化調(diào)整。

html5如何使兩個section并列？代碼示例

2B青年：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

style

section { float: left; width: 50%; }

/style

/head

body

main

sectionsection 1/section

sectionsection 2/section

/main

/body

/html

普通青年

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

style

main { display: flex; }

section { flex: 1; }

/style

/head

body

main

sectionsection 1/section

sectionsection 2/section

/main

/body

/html

文藝青年：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

style

main { display: grid }

/style

/head

body

main

sectionsection 1/section

sectionsection 2/section

/main

/body

/html

參考資料：

flex布局

css grid布局

文章題目：關于html5grid的信息
文章轉(zhuǎn)載：http://chinadenli.net/article6/dscchog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站策劃、自適應網(wǎng)站、App設計、全網(wǎng)營銷推廣、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)