ugeda是專業(yè)級(jí)HTML5交互動(dòng)畫內(nèi)容制作云平臺(tái)，擁有業(yè)界最為強(qiáng)大的動(dòng)畫編輯能力和最為自由的創(chuàng)作空間，可以幫助專業(yè)設(shè)計(jì)師和團(tuán)隊(duì)高效的完成面向移動(dòng)設(shè)備的H5專業(yè)內(nèi)容的制作發(fā)布、帳號(hào)管理、協(xié)同工作、數(shù)據(jù)收集等功能。你的創(chuàng)作靈感像夢(mèng)一樣自由，Mugeda幫你把它完美的實(shí)現(xiàn)！

第一課：Mugeda舞臺(tái)介紹

第二課：剪切／復(fù)制／粘貼

第三課：Mugeda 排列／對(duì)齊／翻轉(zhuǎn)

未完待續(xù)，每日會(huì)更新3課程，請(qǐng)隨時(shí)關(guān)注

現(xiàn)在的App當(dāng)中，我們經(jīng)常需要在原生界面中插入HTML5頁(yè)面，需要在兩者之間交互，也就是原生代碼和HTML5互調(diào)方法，一起來(lái)了解一下如何實(shí)現(xiàn)的吧！

1.原生代碼調(diào)用HTML5頁(yè)面方法

例如，app要調(diào)用HTML5頁(yè)面的changeColor(color)的方法，來(lái)改變HTML5頁(yè)面的顏色

1）HTML5

<script type="text/javascript">

2）Android

 wvMain.getSettings().setJavaScriptEnabled(true); //開啟JavaScript支持

---------------分割線---------------

2.HTLM5頁(yè)面調(diào)用原生方法

例如，點(diǎn)擊HTML5頁(yè)面的文字，回調(diào)原生代碼中的callAndroidMethod方法

1）HTML5

 <a onClick="baobao.callAndroidMethod(100,100,'ccc',true)">CallAndroidMethod</a>

除此之外，

html5代碼不完全整理

html5文件頭

<_meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no”>

<_meta name=”format-detection” content=”telephone=no”>

第二句是給蘋果手機(jī)把數(shù)字都識(shí)別成手機(jī)號(hào)的功能的禁用代碼，蘋果數(shù)字都當(dāng)成手機(jī)號(hào)撥打很惡心。

css部分

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景*/

}

注意下面這句非常有用，不寫這句代碼蘋果手機(jī)下默認(rèn)的圓角，代碼重置css也無(wú)效。

button,input,optgroup,select,textarea {

-webkit-appearance:none; /*去掉webkit默認(rèn)的表單樣式*/

}

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景*/

}

body {

-webkit-text-size-adjust: 100%!important; /*禁止IOS調(diào)整字體大小*/

}

打電話，發(fā)短信、發(fā)郵件

<_a href=”tel:020-10086″>打電話給:020-10086

<_a href=”sms:10086″>發(fā)短信給: 10086

<_a href=”mailto:me@22278.club”>發(fā)送郵件: mine@ismyspace.com

css省略號(hào)：

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

備注：注意css 已經(jīng)能夠?qū)崿F(xiàn)多行省略號(hào)，但是只能webkit用所以沒(méi)太大意義不說(shuō)。

css三角形

border-width: 10px 10px 10px 0; //左箭頭

border-color: transparent #fff;

border-style: solid;

width: 0;

盒模型代碼簡(jiǎn)寫

盒模型外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針?lè)较蛟O(shè)置的：上右下左。

拿margin示例：

margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/

1、如果top、right、bottom、left的值相同，如下面代碼：

margin:10px 10px 10px 10px;

可縮寫為：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代碼：

margin:10px 20px 10px 20px;

可縮寫為：

margin:10px 20px;