http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/f3d58bd0/cn/references/common-style.html
----------------------------------------------------------------------
diff --git a/cn/references/common-style.html b/cn/references/common-style.html
deleted file mode 100644
index da2cddb..0000000
--- a/cn/references/common-style.html
+++ /dev/null
@@ -1,1579 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>éç¨æ ·å¼ | Weex</title>
- <meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
- <meta name="description" content="éç¨æ ·å¼ææ Weex
ç»ä»¶é½æ¯æ以ä¸éç¨æ ·å¼è§åã ç模å Weex ç模ååºäº CSS
ç模åï¼æ¯ä¸ª Weex å
ç´
é½å¯è§ä½ä¸ä¸ªçåãæ们ä¸è¬å¨è®¨è®ºè®¾è®¡æå¸å±æ¶ï¼ä¼æå°ãç模åãè¿ä¸ªæ¦å¿µã
ç模åæè¿°äºä¸ä¸ªå
ç´ æå
ç¨ç空é´ãæ¯ä¸ä¸ªçåæåæ¡è¾¹çï¼å¤è¾¹è·è¾¹ç margin edge,
è¾¹æ¡è¾¹ç border edge, å
è¾¹è·è¾¹ç padding edge ä¸å
容边ç content
edgeã">
-<meta property="og:type" content="website">
-<meta property="og:title" content="éç¨æ ·å¼">
-<meta property="og:url"
content="https://weex-project.io/cn/references/common-style.html">
-<meta property="og:site_name" content="Weex">
-<meta property="og:description" content="éç¨æ ·å¼ææ Weex
ç»ä»¶é½æ¯æ以ä¸éç¨æ ·å¼è§åã ç模å Weex ç模ååºäº CSS
ç模åï¼æ¯ä¸ª Weex å
ç´
é½å¯è§ä½ä¸ä¸ªçåãæ们ä¸è¬å¨è®¨è®ºè®¾è®¡æå¸å±æ¶ï¼ä¼æå°ãç模åãè¿ä¸ªæ¦å¿µã
ç模åæè¿°äºä¸ä¸ªå
ç´ æå
ç¨ç空é´ãæ¯ä¸ä¸ªçåæåæ¡è¾¹çï¼å¤è¾¹è·è¾¹ç margin edge,
è¾¹æ¡è¾¹ç border edge, å
è¾¹è·è¾¹ç padding edge ä¸å
容边ç content
edgeã">
-<meta property="og:image"
content="https://weex-project.io/cn/references/images/css-boxmodel.png">
-<meta property="og:image"
content="https://weex-project.io/cn/references/images/css-flexbox-justify.svg">
-<meta property="og:image"
content="https://weex-project.io/cn/references/images/css-flexbox-align.jpg">
-<meta property="og:image"
content="https://weex-project.io/cn/references/images/style_1.jpg">
-<meta property="og:image"
content="https://weex-project.io/cn/references/images/style_2.jpg">
-<meta property="og:image"
content="https://img.alicdn.com/tps/TB1KGwIPpXXXXbxXFXXXXXXXXXX-400-205.png">
-<meta property="og:updated_time" content="2017-04-28T02:36:21.000Z">
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="éç¨æ ·å¼">
-<meta name="twitter:description" content="éç¨æ ·å¼ææ Weex
ç»ä»¶é½æ¯æ以ä¸éç¨æ ·å¼è§åã ç模å Weex ç模ååºäº CSS
ç模åï¼æ¯ä¸ª Weex å
ç´
é½å¯è§ä½ä¸ä¸ªçåãæ们ä¸è¬å¨è®¨è®ºè®¾è®¡æå¸å±æ¶ï¼ä¼æå°ãç模åãè¿ä¸ªæ¦å¿µã
ç模åæè¿°äºä¸ä¸ªå
ç´ æå
ç¨ç空é´ãæ¯ä¸ä¸ªçåæåæ¡è¾¹çï¼å¤è¾¹è·è¾¹ç margin edge,
è¾¹æ¡è¾¹ç border edge, å
è¾¹è·è¾¹ç padding edge ä¸å
容边ç content
edgeã">
-<meta name="twitter:image"
content="https://weex-project.io/cn/references/images/css-boxmodel.png">
-
- <link rel="alternate" href="/atom.xml" title="Weex"
type="application/atom+xml">
-
-
- <link rel="icon"
href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png">
-
-
- <link href="//fonts.googleapis.com/css?family=Source+Code+Pro"
rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="/css/style.css">
- <link rel="stylesheet" href="/css/swiper.min.css">
-</head>
-
-<body id="references" class="lang-cn">
-
- <script>
- window.PAGE_TYPE = "references";
- window.ROOT = "/"
- </script>
- <header id="header">
- <div class="navbar">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <div class="main-nav">
- <ul class="links">
- <li><a href="/cn/guide">æç¨</a></li>
- <li><a href="/cn/references">æå</a></li>
- <li class="dropdown">
- <a href="javascript:;">åè</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/faq.html">FAQ</a>
- </li>
- <li>
- <a href="/cn/releasenote.html">çæ¬è¯´æ</a>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="javascript:;">å·¥å
·åæå¡</a>
- <ul class="dropdown-menu subnav">
- <li>
- <a href="/cn/playground.html">Playground</a>
- </li>
- <li>
- <a href="/cn/guide/tools/toolkit.html">Weex-toolkit</a>
- </li>
- <li>
- <a href="http://dotwe.org" target="_blank">Code Snippets</a>
- </li>
- <li>
- <a href="https://market.dotwe.org" target="_blank">Market</a>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="info">
- <li><a href="https://github.com/apache/incubator-weex/"
target="_blank"><span class="btn-github iconfont icon-github"></span></a></li>
- </ul>
- <ul class="tools">
- <li>
- <div class="search">
- <form id="search-form" class="search-form"> <!-- æç´¢æ¡ç¸å
³ -->
- <input type="text" id="search-input-header" name="q" results="0"
class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
- </li>
- <li>
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/references/common-style.html"
data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/references/common-style.html"
data-lang="zh-cn">ä¸æ</a>
- </li>
- </ul>
- </div>
- </li>
- <!--<li></li>-->
- </ul>
- </div>
- </div>
- <div id="mobile-nav">
- <a id="logo" href="/cn/">
- <img src="//img.alicdn.com/tps/TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59.svg" />
- </a>
- <a class="btn-menu"><span class="iconfont icon-nav"></span></a>
- </div>
-</header>
-
- <div id="sidebar" class="">
- <div class="sidebar-menu">
-
- <div class="search">
- <form id="search-form" class="search-form"> <!-- æç´¢æ¡ç¸å
³ -->
- <input type="text" id="search-input-sidebar" name="q" results="0"
class="form-control search-input" autocomplete="off" autocorrect="off"/>
- <span class="iconfont icon-search"></span>
- </form>
- <div class="results-panel">
- </div>
-</div>
-
-
-
-<div class="summary">
- <h2 class="part-title">
-
- æå
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/index.html"
class="sidebar-link ">éç¨ç¹æ§</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/ios-apis.html" class="sidebar-link
">iOS APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/android-apis.html" class="sidebar-link
">Android APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/html5-apis.html" class="sidebar-link
">HTML5 APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/jsfm-apis.html" class="sidebar-link
">JS Framework APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/common-style.html" class="sidebar-link
current ">éç¨æ ·å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/text-style.html" class="sidebar-link
">ææ¬æ ·å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/color-names.html" class="sidebar-link
">é¢è²å称å表</a>
- </li>
-
- <li>
- <a href="/cn/references/gesture.html" class="sidebar-link
">æå¿</a>
- </li>
-
- <li>
- <a href="/cn/references/path.html" class="sidebar-link ">Path
(è±)</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/components/index.html" class="sidebar-link ">å
建ç»ä»¶</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/components/a.html" class="sidebar-link
"><a></a>
- </li>
-
- <li>
- <a href="/cn/references/components/slider.html"
class="sidebar-link "><slider></a>
- </li>
-
- <li>
- <a href="/cn/references/components/indicator.html"
class="sidebar-link "><indicator></a>
- </li>
-
- <li>
- <a href="/cn/references/components/switch.html"
class="sidebar-link "><switch></a>
- </li>
-
- <li>
- <a href="/cn/references/components/text.html"
class="sidebar-link "><text></a>
- </li>
-
- <li>
- <a href="/cn/references/components/textarea.html"
class="sidebar-link "><textarea></a>
- </li>
-
- <li>
- <a href="/cn/references/components/video.html"
class="sidebar-link "><video></a>
- </li>
-
- <li>
- <a href="/cn/references/components/web.html"
class="sidebar-link "><web></a>
- </li>
-
- <li>
- <a href="/cn/references/components/div.html"
class="sidebar-link "><div></a>
- </li>
-
- <li>
- <a href="/cn/references/components/image.html"
class="sidebar-link "><image></a>
- </li>
-
- <li>
- <a href="/cn/references/components/input.html"
class="sidebar-link "><input></a>
- </li>
-
- <li>
- <a href="/cn/references/components/list.html"
class="sidebar-link "><list></a>
- </li>
-
- <li>
- <a href="/cn/references/components/cell.html"
class="sidebar-link "><cell></a>
- </li>
-
- <li>
- <a href="/cn/references/components/loading.html"
class="sidebar-link "><loading></a>
- </li>
-
- <li>
- <a href="/cn/references/components/refresh.html"
class="sidebar-link "><refresh></a>
- </li>
-
- <li>
- <a href="/cn/references/components/scroller.html"
class="sidebar-link "><scroller></a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/modules/index.html"
class="sidebar-link ">å
建模å</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/modules/animation.html"
class="sidebar-link ">animation</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/websocket.html"
class="sidebar-link ">WebSocket</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/picker.html"
class="sidebar-link ">picker</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/clipboard.html"
class="sidebar-link ">clipboard</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/dom.html" class="sidebar-link
">dom</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/modal.html"
class="sidebar-link ">modal</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/navigator.html"
class="sidebar-link ">navigator</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/storage.html"
class="sidebar-link ">storage</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/stream.html"
class="sidebar-link ">stream</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/webview.html"
class="sidebar-link ">webview</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/globalevent.html"
class="sidebar-link ">globalEvent</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/unit.html"
class="sidebar-link ">CSS åä½</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/common-event.html"
class="sidebar-link ">éç¨äºä»¶</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html"
class="sidebar-link ">Native DOM APIs</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/weex-variable.html"
class="sidebar-link ">Weex å®ä¾åé</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/web-standards.html"
class="sidebar-link ">Web æ å</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/js-service/index.html" class="sidebar-link ">JS
Service</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/vue/index.html"
class="sidebar-link ">Vue</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/vue/difference-with-web.html"
class="sidebar-link ">Vue 2.x å¨ Weex å Web ä¸çå·®å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/vue/difference-of-vuex.html"
class="sidebar-link ">ä½¿ç¨ Vuex å vue-router</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/advanced/index.html"
class="sidebar-link ">é«é¶ç¥è¯</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/advanced/extend-to-ios.html"
class="sidebar-link ">iOS æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-to-android.html"
class="sidebar-link ">Android æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-to-html5.html"
class="sidebar-link ">HTML5 æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-jsfm.html"
class="sidebar-link ">æå± JS framework</a>
- </li>
-
- <li>
- <a
href="/cn/references/advanced/integrate-devtool-to-android.html"
class="sidebar-link ">éæ Devtools å° Android</a>
- </li>
-
- <li>
- <a
href="/cn/references/advanced/integrate-devtool-to-ios.html"
class="sidebar-link ">éæ Devtools å° iOS</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/migration/index.html" class="sidebar-link
">è¿ç§»</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/platform-difference.html"
class="sidebar-link ">Weex å Web å¹³å°çå·®å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/migration/migration-from-weex.html"
class="sidebar-link ">å¦ä½å°åæ Weex 项ç®æ¹é æ Vue çæ¬</a>
- </li>
-
- <li>
- <a href="/cn/references/migration/difference.html"
class="sidebar-link ">Weex å Vue 2.x çè¯æ³å·®å¼</a>
- </li>
-
- </ul>
-
- </li>
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html"
class="sidebar-link">æ§è¯æ³ææ¡£</a></h3>
- </li>
-
- </ul>
-</div>
-
- <a class="btn-close-sidebar iconfont icon-close"></a>
- </div>
-</div>
-
- <div class="article-wrapper page-layout">
- <div class="doc-nav">
-
-
-
-<div class="summary">
- <h2 class="part-title">
-
- æå
-
- </h2>
- <ul class="doc-summary">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/index.html"
class="sidebar-link ">éç¨ç¹æ§</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/ios-apis.html" class="sidebar-link
">iOS APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/android-apis.html" class="sidebar-link
">Android APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/html5-apis.html" class="sidebar-link
">HTML5 APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/jsfm-apis.html" class="sidebar-link
">JS Framework APIs</a>
- </li>
-
- <li>
- <a href="/cn/references/common-style.html" class="sidebar-link
current ">éç¨æ ·å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/text-style.html" class="sidebar-link
">ææ¬æ ·å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/color-names.html" class="sidebar-link
">é¢è²å称å表</a>
- </li>
-
- <li>
- <a href="/cn/references/gesture.html" class="sidebar-link
">æå¿</a>
- </li>
-
- <li>
- <a href="/cn/references/path.html" class="sidebar-link ">Path
(è±)</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/components/index.html" class="sidebar-link ">å
建ç»ä»¶</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/components/a.html" class="sidebar-link
"><a></a>
- </li>
-
- <li>
- <a href="/cn/references/components/slider.html"
class="sidebar-link "><slider></a>
- </li>
-
- <li>
- <a href="/cn/references/components/indicator.html"
class="sidebar-link "><indicator></a>
- </li>
-
- <li>
- <a href="/cn/references/components/switch.html"
class="sidebar-link "><switch></a>
- </li>
-
- <li>
- <a href="/cn/references/components/text.html"
class="sidebar-link "><text></a>
- </li>
-
- <li>
- <a href="/cn/references/components/textarea.html"
class="sidebar-link "><textarea></a>
- </li>
-
- <li>
- <a href="/cn/references/components/video.html"
class="sidebar-link "><video></a>
- </li>
-
- <li>
- <a href="/cn/references/components/web.html"
class="sidebar-link "><web></a>
- </li>
-
- <li>
- <a href="/cn/references/components/div.html"
class="sidebar-link "><div></a>
- </li>
-
- <li>
- <a href="/cn/references/components/image.html"
class="sidebar-link "><image></a>
- </li>
-
- <li>
- <a href="/cn/references/components/input.html"
class="sidebar-link "><input></a>
- </li>
-
- <li>
- <a href="/cn/references/components/list.html"
class="sidebar-link "><list></a>
- </li>
-
- <li>
- <a href="/cn/references/components/cell.html"
class="sidebar-link "><cell></a>
- </li>
-
- <li>
- <a href="/cn/references/components/loading.html"
class="sidebar-link "><loading></a>
- </li>
-
- <li>
- <a href="/cn/references/components/refresh.html"
class="sidebar-link "><refresh></a>
- </li>
-
- <li>
- <a href="/cn/references/components/scroller.html"
class="sidebar-link "><scroller></a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/modules/index.html"
class="sidebar-link ">å
建模å</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/modules/animation.html"
class="sidebar-link ">animation</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/websocket.html"
class="sidebar-link ">WebSocket</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/picker.html"
class="sidebar-link ">picker</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/clipboard.html"
class="sidebar-link ">clipboard</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/dom.html" class="sidebar-link
">dom</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/modal.html"
class="sidebar-link ">modal</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/navigator.html"
class="sidebar-link ">navigator</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/storage.html"
class="sidebar-link ">storage</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/stream.html"
class="sidebar-link ">stream</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/webview.html"
class="sidebar-link ">webview</a>
- </li>
-
- <li>
- <a href="/cn/references/modules/globalevent.html"
class="sidebar-link ">globalEvent</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/unit.html"
class="sidebar-link ">CSS åä½</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/common-event.html"
class="sidebar-link ">éç¨äºä»¶</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/native-dom-api.html"
class="sidebar-link ">Native DOM APIs</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/weex-variable.html"
class="sidebar-link ">Weex å®ä¾åé</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/web-standards.html"
class="sidebar-link ">Web æ å</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/js-service/index.html" class="sidebar-link ">JS
Service</a></h3>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/vue/index.html"
class="sidebar-link ">Vue</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/vue/difference-with-web.html"
class="sidebar-link ">Vue 2.x å¨ Weex å Web ä¸çå·®å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/vue/difference-of-vuex.html"
class="sidebar-link ">ä½¿ç¨ Vuex å vue-router</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a href="/cn/references/advanced/index.html"
class="sidebar-link ">é«é¶ç¥è¯</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/advanced/extend-to-ios.html"
class="sidebar-link ">iOS æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-to-android.html"
class="sidebar-link ">Android æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-to-html5.html"
class="sidebar-link ">HTML5 æ©å±</a>
- </li>
-
- <li>
- <a href="/cn/references/advanced/extend-jsfm.html"
class="sidebar-link ">æå± JS framework</a>
- </li>
-
- <li>
- <a
href="/cn/references/advanced/integrate-devtool-to-android.html"
class="sidebar-link ">éæ Devtools å° Android</a>
- </li>
-
- <li>
- <a
href="/cn/references/advanced/integrate-devtool-to-ios.html"
class="sidebar-link ">éæ Devtools å° iOS</a>
- </li>
-
- </ul>
-
- </li>
-
- <li>
- <h3 class="chapter-title"><a
href="/cn/references/migration/index.html" class="sidebar-link
">è¿ç§»</a></h3>
-
- <ul class="chapter">
-
- <li>
- <a href="/cn/references/platform-difference.html"
class="sidebar-link ">Weex å Web å¹³å°çå·®å¼</a>
- </li>
-
- <li>
- <a href="/cn/references/migration/migration-from-weex.html"
class="sidebar-link ">å¦ä½å°åæ Weex 项ç®æ¹é æ Vue çæ¬</a>
- </li>
-
- <li>
- <a href="/cn/references/migration/difference.html"
class="sidebar-link ">Weex å Vue 2.x çè¯æ³å·®å¼</a>
- </li>
-
- </ul>
-
- </li>
-
-
-
- <li>
- <h3 class="chapter-title"><a href="/cn/v-0.10/references/index.html"
class="sidebar-link">æ§è¯æ³ææ¡£</a></h3>
- </li>
-
- </ul>
-</div>
- </div>
-
-
-<article class="article article-type-references">
- <div class="article-entry" itemprop="articleBody">
- <header class="article-header">
-
-
- <h1 class="article-title" itemprop="name">
- éç¨æ ·å¼
- </h1>
-
-
- <time class="article-date" datetime="2017-04-28T02:36:21.000Z">Updated time:
28/04/2017</time>
-</header>
- <h1 id="éç¨æ ·å¼"><a href="#éç¨æ ·å¼" class="headerlink"
title="éç¨æ ·å¼"></a>éç¨æ ·å¼</h1><p>ææ Weex
ç»ä»¶é½æ¯æ以ä¸éç¨æ ·å¼è§åã</p>
-<h2 id="ç模å"><a href="#ç模å" class="headerlink"
title="ç模å"></a>ç模å</h2><p><img src="./images/css-boxmodel.png"
alt="box model @300*"></p>
-<p>Weex ç模ååºäº <a href="https://www.w3.org/TR/css3-box/"
target="_blank" rel="external">CSS ç模å</a>ï¼æ¯ä¸ª Weex å
ç´
é½å¯è§ä½ä¸ä¸ªçåãæ们ä¸è¬å¨è®¨è®ºè®¾è®¡æå¸å±æ¶ï¼ä¼æå°ãç模åãè¿ä¸ªæ¦å¿µã</p>
-<p>ç模åæè¿°äºä¸ä¸ªå
ç´ æå
ç¨ç空é´ãæ¯ä¸ä¸ªçåæåæ¡è¾¹çï¼å¤è¾¹è·è¾¹ç margin edge,
è¾¹æ¡è¾¹ç border edge, å
è¾¹è·è¾¹ç padding edge ä¸å
容边ç content
edgeãè¿åå±è¾¹çï¼å½¢æä¸å±å±ççåå
裹起æ¥ï¼è¿å°±æ¯ç模å大ä½ä¸çå«ä¹ã</p>
-<p><strong>注æï¼</strong><br>Weex 对äºé¿åº¦å¼ç®ååªæ¯æ<em>åç´
</em>å¼ï¼ä¸æ¯æç¸å¯¹åä½ï¼<code>em</code>ã<code>rem</code>ï¼ã</p>
-<ul>
-<li><code>width {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>height {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><p><code>padding {length}</code>ï¼å
è¾¹è·ï¼å
容åè¾¹æ¡ä¹é´çè·ç¦»ãé»è®¤å¼ 0</p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>padding-left {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>padding-right {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>padding-top {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>padding-bottom {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-</ul>
-</li>
-<li><p><code>margin</code>ï¼</p>
-<p>å¤è¾¹è·ï¼å
ç´ åå
ç´ ä¹é´ç空ç½è·ç¦»ãå¼ç±»å为
lengthï¼é»è®¤å¼ 0</p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>margin-left {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>margin-right {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>margin-top {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-<li><code>margin-bottom {length}</code>ï¼ï¼é»è®¤å¼ 0</li>
-</ul>
-</li>
-<li><p>borderï¼</p>
-<p>设å®è¾¹æ¡ï¼<code>border</code> ç®åä¸æ¯æ类似è¿æ ·
<code>border: 1 solid #ff0000;</code> çç»ååæ³ã</p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><p><code>border-style</code>ï¼</p>
-<p>设å®è¾¹æ¡æ ·å¼ï¼å¼ç±»å为 stringï¼å¯éå¼ä¸º <code>solid</code>
| <code>dashed</code> | <code>dotted</code>ï¼é»è®¤å¼ <code>solid</code></p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>border-left-style {string}</code>ï¼å¯éå¼ä¸º <code>solid</code>
| <code>dashed</code> | <code>dotted</code>ï¼é»è®¤å¼ <code>solid</code></li>
-<li><code>border-top-style {string}</code>ï¼å¯éå¼ä¸º <code>solid</code> |
<code>dashed</code> | <code>dotted</code>ï¼é»è®¤å¼ <code>solid</code></li>
-<li><code>border-right-style {string}</code>ï¼å¯éå¼ä¸º <code>solid</code>
| <code>dashed</code> | <code>dotted</code>ï¼é»è®¤å¼ <code>solid</code></li>
-<li><code>border-bottom-style {string}</code>ï¼å¯éå¼ä¸º
<code>solid</code> | <code>dashed</code> | <code>dotted</code>ï¼é»è®¤å¼
<code>solid</code></li>
-</ul>
-</li>
-<li><p><code>border-width {length}</code>ï¼</p>
-<p>设å®è¾¹æ¡å®½åº¦ï¼éè´å¼, é»è®¤å¼ 0</p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>border-left-width {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼ 0</li>
-<li><code>border-top-width {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼ 0</li>
-<li><code>border-right-width {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼ 0</li>
-<li><code>border-bottom-width {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼ 0</li>
-</ul>
-</li>
-<li><p><code>border-color {color}</code>ï¼</p>
-<p>设å®è¾¹æ¡é¢è²ï¼é»è®¤å¼ <code>#000000</code></p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>border-left-color {color}</code>ï¼ï¼é»è®¤å¼
<code>#000000</code></li>
-<li><code>border-top-color {color}</code>ï¼ï¼é»è®¤å¼
<code>#000000</code></li>
-<li><code>border-right-color {color}</code>ï¼ï¼é»è®¤å¼
<code>#000000</code></li>
-<li><code>border-bottom-color {color}</code>ï¼ï¼é»è®¤å¼
<code>#000000</code></li>
-</ul>
-</li>
-<li><p><code>border-radius {length}</code>ï¼</p>
-<p>设å®åè§ï¼é»è®¤å¼ 0</p>
-<p>å¯æå¦ä¸åæ³ï¼</p>
-<ul>
-<li><code>border-bottom-left-radius {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼
0</li>
-<li><code>border-bottom-right-radius {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼
0</li>
-<li><code>border-top-left-radius {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼
0</li>
-<li><code>border-top-right-radius {length}</code>ï¼ï¼éè´å¼, é»è®¤å¼
0</li>
-</ul>
-</li>
-</ul>
-</li>
-</ul>
-<h3 id="注æï¼"><a href="#注æï¼" class="headerlink"
title="注æï¼"></a>注æï¼</h3><p>Weex ç模åç
<code>box-sizing</code> é»è®¤ä¸º
<code>border-box</code>ï¼å³çåç宽é«å
å«å
容ãå
è¾¹è·åè¾¹æ¡ç宽度ï¼ä¸å
å«å¤è¾¹è·ç宽度ã</p>
-<p>ç®åå¨ <code><image></code> ç»ä»¶ä¸å°æ æ³åªå®ä¹ä¸ä¸ªæå
个è§ç <code>border-radius</code>ãæ¯å¦ä½ æ
æ³å¨è¿ä¸¤ä¸ªç»ä»¶ä¸ä½¿ç¨
<code>border-top-left-radius</code>ã该约æåªå¯¹ iOS çæï¼Android
并ä¸åæ¤éå¶ã</p>
-<p>尽管 <code>overflow:hidden</code> å¨ Android
ä¸æ¯é»è®¤è¡ä¸ºï¼ä½åªæä¸åæ¡ä»¶é½æ»¡è¶³æ¶ï¼ä¸ä¸ªç¶ view
æä¼å» clip å®çå viewãè¿ä¸ªéå¶åªå¯¹ Android çæï¼iOS
ä¸åå½±åã</p>
-<ul>
-<li>ç¶viewæ¯<code>div</code>, <code>a</code>, <code>cell</code>,
<code>refresh</code> æ <code>loading</code>ã</li>
-<li>ç³»ç»çæ¬æ¯ Android 4.3 ææ´é«ã</li>
-<li>ç³»ç»çæ¬ä¸æ¯ Andorid 7.0ã</li>
-<li>ç¶ view 没æ <code>background-image</code> å±æ§æç³»ç»çæ¬æ¯
Android 5.0 ææ´é«ã</li>
-</ul>
-<h3 id="示ä¾ï¼"><a href="#示ä¾ï¼" class="headerlink"
title="示ä¾ï¼"></a>示ä¾ï¼</h3><figure class="highlight
html"><table><tr><td class="code"><pre><div class="line"><span
class="tag"><<span class="name">template</span>></span></div><div
class="line"> <span class="tag"><<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">image</span> <span
class="attr">style</span>=<span class="string">"width: 400px; height: 200px;
margin-left: 20px;"</span> <span class="attr">src</span>=<span
class="string">"https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_b...@3x.png"</span>></span><span
class="tag"></<span class="name">image</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"><span
class="tag"></<span
class="name">template</span>></span></div></pre></td></tr></table></figure>
-<h2 id="Flexbox"><a href="#Flexbox" class="headerlink"
title="Flexbox"></a>Flexbox</h2><p>Weex å¸å±æ¨¡ååºäº CSS <a
href="http://www.w3.org/TR/css3-flexbox/" target="_blank"
rel="external"><code>Flexbox</code></a>ï¼ä»¥ä¾¿ææ页é¢å
ç´
çæçè½å¤ä¸è´å¯é¢æµï¼åæ¶é¡µé¢å¸å±è½éåºåç§è®¾å¤æè
å±å¹å°ºå¯¸ã</p>
-<p>Flexbox å
å« flex 容å¨å flex æå项ãå¦æä¸ä¸ª Weex å
ç´
å¯ä»¥å®¹çº³å
¶ä»å
ç´ ï¼é£ä¹å®å°±æ为 flex
容å¨ãéè¦æ³¨æçæ¯ï¼flexbox çèçè§èç¸è¾æ°çæäºåºå
¥ï¼æ¯å¦æ¯å¦è½æ¯æ wrappingãè¿äºé½æè¿°å¨ W3C
çå·¥ä½èæ¡ä¸äºï¼ä½
éè¦æ³¨æä¸æ°èçæ¬ä¹é´çä¸åãå¦å¤ï¼èçæ¬åªå¨å®å 4.4
ç以ä¸å¾å°æ¯æã</p>
-<h3 id="Flex-容å¨"><a href="#Flex-容å¨" class="headerlink" title="Flex
容å¨"></a>Flex 容å¨</h3><p>å¨ Weex ä¸ï¼Flexbox
æ¯é»è®¤ä¸å¯ä¸çå¸å±æ¨¡åï¼æä»¥ä½ ä¸éè¦æå¨ä¸ºå
ç´ æ·»å
<code>display: flex;</code> å±æ§ã</p>
-<ul>
-<li><p><code>flex-direction</code>ï¼</p>
-<p>å®ä¹äº flex 容å¨ä¸ flex æå项çæåæ¹åãå¯éå¼ä¸º
<code>row</code> | <code>column</code>ï¼é»è®¤å¼ä¸º <code>column</code></p>
-<ul>
-<li><code>column</code>ï¼ä»ä¸å°ä¸æåã</li>
-<li><code>row</code>ï¼ä»å·¦å°å³æåã</li>
-</ul>
-</li>
-<li><p><code>justify-content</code>ï¼</p>
-<p>å®ä¹äº flex 容å¨ä¸ flex
æå项å¨ä¸»è½´æ¹åä¸å¦ä½æå以å¤ç空ç½é¨åãå¯éå¼ä¸º
<code>flex-start</code> | <code>flex-end</code> | <code>center</code> |
<code>space-between</code>ï¼é»è®¤å¼ä¸º <code>flex-start</code>ã</p>
-<ul>
-<li><code>flex-start</code>ï¼æ¯é»è®¤å¼ï¼ææç flex
æå项é½æåå¨å®¹å¨çåé¨ï¼</li>
-<li><code>flex-end</code>ï¼åæå³çæå项æåå¨å®¹å¨çåé¨ï¼</li>
-<li><code>center</code>ï¼å³ä¸é´å¯¹é½ï¼æå项æåå¨å®¹å¨ä¸é´ã两边çç½ï¼</li>
-<li><code>space-between</code>ï¼è¡¨ç¤ºä¸¤ç«¯å¯¹é½ï¼ç©ºç½ååå°å¡«å
å°
flex æå项ä¹é´ã</li>
-</ul>
-<p><img src="./images/css-flexbox-justify.svg" alt="justify-content @400*"></p>
-</li>
-<li><p><code>align-items</code>ï¼</p>
-<p>å®ä¹äº flex 容å¨ä¸ flex
æå项å¨çºµè½´æ¹åä¸å¦ä½æå以å¤ç空ç½é¨åãå¯éå¼ä¸º
<code>stretch</code> | <code>flex-start</code> | <code>center</code> |
<code>flex-end</code>ï¼é»è®¤å¼ä¸º <code>stretch</code>ã</p>
-<ul>
-<li><code>stretch</code> æ¯é»è®¤å¼ï¼å³æ伸é«åº¦è³ flex
容å¨ç大å°ï¼</li>
-<li><code>flex-start</code>
åæ¯ä¸å¯¹é½ï¼ææçæå项æåå¨å®¹å¨é¡¶é¨ï¼</li>
-<li><code>flex-end</code>
æ¯ä¸å¯¹é½ï¼ææçæå项æåå¨å®¹å¨åºé¨ï¼</li>
-<li><code>center</code> æ¯ä¸é´å¯¹é½ï¼æææå项é½åç´å°å±
ä¸æ¾ç¤ºã</li>
-</ul>
-<p><img src="./images/css-flexbox-align.jpg" alt="align-items @400*"></p>
-</li>
-</ul>
-<h3 id="Flex-æå项"><a href="#Flex-æå项" class="headerlink"
title="Flex æå项"></a>Flex æå项</h3><p>flex å±æ§å®ä¹äº flex
æå项å¯ä»¥å
ç¨å®¹å¨ä¸å©ä½ç©ºé´ç大å°ãå¦æææçæå项设置ç¸åçå¼
<code>flex: 1</code>ï¼å®ä»¬å°å¹³ååé
å©ä½ç©ºé´.
å¦æä¸ä¸ªæå项设置çå¼ä¸º <code>flex: 2</code>ï¼å
¶å®çæå项设置çå¼ä¸º <code>flex:
1</code>ï¼é£ä¹è¿ä¸ªæå项æå ç¨çå©ä½ç©ºé´æ¯å
¶å®æå项ç2åã</p>
-<ul>
-<li><code>flex {number}</code>ï¼å¼ä¸º number ç±»åã</li>
-</ul>
-<h3 id="示ä¾"><a href="#示ä¾" class="headerlink"
title="示ä¾"></a>示ä¾</h3><p>ä¸ä¸ªç®åçç½æ ¼å¸å±ã</p>
-<p><img src="images/style_1.jpg" alt="mobile_preview"></p>
-<figure class="highlight html"><table><tr><td class="code"><pre><div
class="line"><span class="tag"><<span
class="name">template</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span>></span></div><div
class="line"> <span class="tag"><<span class="name">div</span> <span
class="attr">v-for</span>=<span class="string">"(v, i) in list"</span> <span
class="attr">class</span>=<span
class="string">"row"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">v-for</span>=<span class="string">"(text, k) in v"</span> <span
class="attr">class</span>=<span
class="string">"item"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span>></span></div><div
class="line"> <span class="tag"><<span
class="name">text</span>></span>{{text}}<span
class="tag"></<span class="name">text</span>></span></div><d
iv class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"><span class="tag"></<span
class="name">template</span>></span></div><div class="line"><span
class="tag"><<span class="name">style</span> <span
class="attr">scoped</span>></span><span class="css"></span></div><div
class="line"> <span class="selector-class">.item</span>{</div><div
class="line"> <span class="attribute">flex</span>:<span
class="number">1</span>;</div><div class="line"> <span
class="attribute">justify-content</span>: center;</div><div class="line">
<span class="attribute">align-items</span>:center;</div><div class="line">
<span class="attribute">border-width</span>
:<span class="number">1</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.row</span>{</div><div
class="line"> <span class="attribute">flex-direction</span>: row;</div><div
class="line"> <span class="attribute">height</span>:<span
class="number">80px</span>;</div><div class="line"> }</div><div
class="line"><span class="tag"></<span
class="name">style</span>></span></div><div class="line"><span
class="tag"><<span class="name">script</span>></span><span
class="javascript"></span></div><div class="line"> <span
class="built_in">module</span>.exports = {</div><div class="line">
<span class="attr">data</span>: <span class="function"><span
class="keyword">function</span> (<span class="params"></span>)
</span>{</div><div class="line"> <span class="keyword">return</span>
{</div><div class="line"> <span
class="attr">list</span>:[</div><div class="line"> [<span
class="string">'A'</s
pan>, <span class="string">'B'</span>, <span
class="string">'C'</span>],</div><div class="line"> [<span
class="string">'D'</span>, <span class="string">'E'</span>, <span
class="string">'F'</span>],</div><div class="line"> [<span
class="string">'G'</span>, <span class="string">'H'</span>, <span
class="string">'I'</span>]</div><div class="line"> ]</div><div
class="line"> }</div><div class="line"> }</div><div
class="line"> }</div><div class="line"><span class="tag"></<span
class="name">script</span>></span></div></pre></td></tr></table></figure>
-<p>ä¸ä¸ªå¨ç¸å¯¹äºå±å¹æ°´å¹³å±
ä¸ï¼å
¨å±å±
ä¸ç
<code><div></code>ã</p>
-<figure class="highlight html"><table><tr><td class="code"><pre><div
class="line"><span class="tag"><<span
class="name">template</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span
class="string">"wrapper"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span
class="string">"box"</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"><span
class="tag"></<span class="name">template</span>></span></div><div
class="line"></div><div class="line"><span class="tag"><<span
class="name">style</span> <span class="attr">scoped</span>></span><span
class="css"></span></div><div class="line"> <span
class="selector-class">.wrapper</span> {</div><div clas
s="line"> <span class="attribute">position</span>: absolute;</div><div
class="line"> <span class="attribute">top</span>: <span
class="number">0</span>;</div><div class="line"> <span
class="attribute">right</span>: <span class="number">0</span>;</div><div
class="line"> <span class="attribute">bottom</span>: <span
class="number">0</span>;</div><div class="line"> <span
class="attribute">left</span>: <span class="number">0</span>;</div><div
class="line"> <span class="attribute">background-color</span>: <span
class="number">#cccccc</span>;</div><div class="line"> <span
class="attribute">justify-content</span>: center;</div><div class="line">
<span class="attribute">align-items</span>: center;</div><div class="line">
}</div><div class="line"> <span class="selector-class">.box</span>
{</div><div class="line"> <span class="attribute">width</span>: <span
class="number">200px</span>;</div><div class="line"> <span
class="attribute">height</span>: <span
class="number">200px</span>;</div><div class="line"> <span
class="attribute">background-color</span>: <span
class="number">#fc0000</span>;</div><div class="line"> }</div><div
class="line"><span class="tag"></<span
class="name">style</span>></span></div></pre></td></tr></table></figure>
-<h2 id="å®ä½"><a href="#å®ä½" class="headerlink"
title="å®ä½"></a>å®ä½</h2><p>Weex æ¯æ <code>position</code>
å®ä½ï¼ç¨æ³ä¸ CSS position 类似ã为å
ç´ è®¾ç½® <code>position</code>
åï¼å¯éè¿
<code>top</code>ã<code>right</code>ã<code>bottom</code>ã<code>left</code>
å个å±æ§è®¾ç½®å
ç´ åæ ã</p>
-<ul>
-<li><p><code>position {string}</code>ï¼</p>
-<p>设置å®ä½ç±»åãå¯éå¼ä¸º <code>relative</code> |
<code>absolute</code> | <code>fixed</code> | <code>sticky</code>ï¼é»è®¤å¼ä¸º
<code>relative</code>ã</p>
-<ul>
-<li><code>relative</code> æ¯é»è®¤å¼ï¼æçæ¯ç¸å¯¹å®ä½ï¼</li>
-<li><code>absolute</code> æ¯ç»å¯¹å®ä½ï¼ä»¥å
ç´
ç容å¨ä½ä¸ºåèç³»ï¼</li>
-<li><code>fixed</code> ä¿è¯å
ç´
å¨é¡µé¢çªå£ä¸ç对åºä½ç½®æ¾ç¤ºï¼</li>
-<li><code>sticky</code> æçæ¯ä»
å½å
ç´ æ»å¨å°é¡µé¢ä¹å¤æ¶ï¼å
ç´
ä¼åºå®å¨é¡µé¢çªå£ç顶é¨ã</li>
-</ul>
-</li>
-<li><code>top {number}</code>ï¼è·ç¦»ä¸æ¹çå移éï¼é»è®¤ä¸º 0ã</li>
-<li><code>bottom {number}</code>ï¼è·ç¦»ä¸æ¹çå移éï¼é»è®¤ä¸º
0ã</li>
-<li><code>left {number}</code>ï¼è·ç¦»å·¦æ¹çå移éï¼é»è®¤ä¸º 0ã</li>
-<li><code>right {number}</code>ï¼è·ç¦»å³æ¹çå移éï¼é»è®¤ä¸º
0ã</li>
-</ul>
-<p><strong>注æï¼</strong></p>
-<ol>
-<li>Weex ç®åä¸æ¯æ <code>z-index</code> 设置å
ç´ å±çº§å
³ç³»ï¼ä½é
åçå
ç´ å±çº§æ´é«ï¼å æ¤ï¼å¯¹äºå±çº§é«çå
ç´ ï¼å¯å°å
¶æåå¨åé¢ã</li>
-<li>å¦æå®ä½å
ç´ è¶
è¿å®¹å¨è¾¹çï¼å¨ Android ä¸ï¼è¶
åºé¨åå°<strong>ä¸å¯è§</strong>ï¼åå å¨äº Android 端å
ç´
<code>overflow</code> é»è®¤å¼ä¸º <code>hidden</code>ï¼ä½ç®å Android
æä¸æ¯æ设置 <code>overflow: visible</code>ã</li>
-</ol>
-<h3 id="示ä¾-1"><a href="#示ä¾-1" class="headerlink"
title="示ä¾"></a>示ä¾</h3><p><img src="images/style_2.jpg"
alt="mobile_preview"></p>
-<figure class="highlight html"><table><tr><td class="code"><pre><div
class="line"><span class="tag"><<span class="name">template</span> <span
class="attr">scoped</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span
class="string">"wrapper"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"box
box1"</span>></span></div><div class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"box
box2"</span>></span></div><div class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"box box3"</span>>
;</span></div><div class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"><span class="tag"></<span
class="name">template</span>></span></div><div class="line"></div><div
class="line"><span class="tag"><<span
class="name">style</span>></span><span class="css"></span></div><div
class="line"> <span class="selector-class">.wrapper</span> {</div><div
class="line"> <span class="attribute">position</span>: absolute;</div><div
class="line"> <span class="attribute">top</span>: <span
class="number">0</span>;</div><div class="line"> <span
class="attribute">right</span>: <span class="number">0</span>;</div><div
class="line"> <span class="attribute">bottom</span>: <span
class="number">0</span>;</div><div class="line"> <span
class="attribute">left</span>: <span class="number">0</span>;</div><div
class="line"> <span class="at
tribute">background-color</span>: <span
class="number">#cccccc</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.box</span> {</div><div
class="line"> <span class="attribute">width</span>: <span
class="number">400px</span>;</div><div class="line"> <span
class="attribute">height</span>: <span class="number">400px</span>;</div><div
class="line"> <span class="attribute">position</span>: absolute;</div><div
class="line"> }</div><div class="line"> <span
class="selector-class">.box1</span> {</div><div class="line"> <span
class="attribute">top</span>: <span class="number">0</span>;</div><div
class="line"> <span class="attribute">left</span>: <span
class="number">0</span>;</div><div class="line"> <span
class="attribute">background-color</span>: <span
class="number">#ff0000</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.box2</span> {</div><div
class="line"> <
span class="attribute">top</span>: <span
class="number">150px</span>;</div><div class="line"> <span
class="attribute">left</span>: <span class="number">150px</span>;</div><div
class="line"> <span class="attribute">background-color</span>: <span
class="number">#0055dd</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.box3</span> {</div><div
class="line"> <span class="attribute">top</span>: <span
class="number">300px</span>;</div><div class="line"> <span
class="attribute">left</span>: <span class="number">300px</span>;</div><div
class="line"> <span class="attribute">background-color</span>: <span
class="number">#00ff49</span>;</div><div class="line"> }</div><div
class="line"><span class="tag"></<span
class="name">style</span>></span></div></pre></td></tr></table></figure>
-<h2 id="伪类-v0-9-5"><a href="#伪类-v0-9-5" class="headerlink"
title="伪类 v0.9.5+"></a>伪类 <span
class="api-version">v0.9.5+</span></h2><p>Weex
æ¯æåç§ä¼ªç±»ï¼<code>active</code>, <code>focus</code>,
<code>disabled</code>, <code>enabled</code></p>
-<p>ææç»ä»¶é½æ¯æ <code>active</code>, ä½åªæ <code>input</code>
ç»ä»¶å <code>textarea</code> ç»ä»¶æ¯æ <code>focus</code>,
<code>enabled</code>, <code>diabled</code>ã</p>
-<h3 id="è§å"><a href="#è§å" class="headerlink"
title="è§å"></a>è§å</h3><ul>
-<li><p>åæ¶çæçæçæ¶åï¼ä¼å
级é«è¦çä¼å
级ä½</p>
-<ul>
-<li>ä¾å¦ï¼<code>input:active:enabled</code> å <code>input:active</code>
åæ¶çæï¼åè
è¦çåè
</li>
-</ul>
-</li>
-<li><p>äºèè§åå¦ä¸æ示</p>
-<p><img
src="https://img.alicdn.com/tps/TB1KGwIPpXXXXbxXFXXXXXXXXXX-400-205.png"
alt="rule"></p>
-</li>
-</ul>
-<h3 id="Example"><a href="#Example" class="headerlink"
title="Example"></a>Example</h3><figure class="highlight html"><table><tr><td
class="code"><pre><div class="line"><span class="tag"><<span
class="name">template</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span
class="string">"wrapper"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">image</span> <span
class="attr">:src</span>=<span class="string">"logoUrl"</span> <span
class="attr">class</span>=<span class="string">"logo"</span>></span><span
class="tag"></<span class="name">image</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"><span
class="tag"></<span class="name">template</span>></span></div><div
class="line"></div><div class="line"><span class="tag"><<span
class="name">style</span> <span class="attr">scoped</
span>></span><span class="css"></span></div><div class="line"> <span
class="selector-class">.wrapper</span> {</div><div class="line"> <span
class="attribute">align-items</span>: center;</div><div class="line"> <span
class="attribute">margin-top</span>: <span
class="number">120px</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.title</span> {</div><div
class="line"> <span class="attribute">font-size</span>: <span
class="number">48px</span>;</div><div class="line"> }</div><div
class="line"> <span class="selector-class">.logo</span> {</div><div
class="line"> <span class="attribute">width</span>: <span
class="number">360px</span>;</div><div class="line"> <span
class="attribute">height</span>: <span class="number">82px</span>;</div><div
class="line"> <span class="attribute">background-color</span>:
red;</div><div class="line"> }</div><div class="line"> <span
class="selector-class">.logo</span
><span class="selector-pseudo">:active</span> {</div><div class="line">
> <span class="attribute">width</span>: <span
>class="number">180px</span>;</div><div class="line"> <span
>class="attribute">height</span>: <span class="number">82px</span>;</div><div
>class="line"> <span class="attribute">background-color</span>:
>green;</div><div class="line"> }</div><div class="line"><span
>class="tag"></<span class="name">style</span>></span></div><div
>class="line"></div><div class="line"><span class="tag"><<span
>class="name">script</span>></span><span
>class="javascript"></span></div><div class="line"> <span
>class="keyword">export</span> <span class="keyword">default</span>
>{</div><div class="line"> <span class="attr">props</span>:
>{</div><div class="line"> <span class="attr">logoUrl</span>:
>{</div><div class="line"> <span class="attr">default</span>:
><span
>class="string">'https://alibaba.github.io/weex/img/weex_logo_b...@3x.png'</span>
</div><div class="line"> },</div><div class="line"> <span
class="attr">target</span>: {</div><div class="line"> <span
class="attr">default</span>: <span class="string">'World'</span></div><div
class="line"> }</div><div class="line"> },</div><div
class="line"> <span class="attr">methods</span>: {</div><div
class="line"> update (e) {</div><div class="line"> <span
class="keyword">this</span>.target = <span
class="string">'Weex'</span>;</div><div class="line"> }</div><div
class="line"> }</div><div class="line"> };</div><div
class="line"><span class="tag"></<span
class="name">script</span>></span></div></pre></td></tr></table></figure>
-<p><a href="http://dotwe.org/vue/df2c8f254620d6d30d0906ee75fe5b99"
target="_blank" rel="external">è¯ä¸ä¸</a></p>
-<h2 id="线æ§æ¸å-v0-10"><a href="#线æ§æ¸å-v0-10" class="headerlink"
title="线æ§æ¸å v0.10+"></a>线æ§æ¸å <span
class="api-version">v0.10+</span></h2><p>Weex æ¯æ线æ§æ¸åèæ¯ï¼å
·ä½ä»ç»å¯åè <a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients"
target="_blank" rel="external">W3C description of the gradient</a>ã</p>
-<p>ææç»ä»¶åæ¯æ线æ§æ¸åã</p>
-<h3 id="使ç¨"><a href="#使ç¨" class="headerlink"
title="使ç¨"></a>使ç¨</h3><p> ä½ å¯ä»¥éè¿ <code>background-image</code>
å±æ§å建线æ§æ¸åã</p>
-<figure class="highlight css"><table><tr><td class="code"><pre><div
class="line"><span class="selector-tag">background-image</span>: <span
class="selector-tag">linear-gradient</span>(<span
class="selector-tag">to</span> <span class="selector-tag">top</span>,<span
class="selector-id">#a80077</span>,<span
class="selector-id">#66ff00</span>);</div></pre></td></tr></table></figure>
-<p>ç®åæä¸æ¯æ <code>radial-gradient</code>ï¼å¾åæ¸åï¼ã</p>
-<p>Weex ç®ååªæ¯æ两ç§é¢è²çæ¸åï¼æ¸åæ¹åå¦ä¸ï¼</p>
-<ul>
-<li>to right<br>ä»å·¦åå³æ¸å</li>
-<li>to left<br>ä»å³åå·¦æ¸å</li>
-<li>to bottom<br>ä»ä¸å°ä¸æ¸å</li>
-<li>to top<br>ä»ä¸å°ä¸æ¸å</li>
-<li>to bottom right<br>ä»å·¦ä¸è§å°å³ä¸è§</li>
-<li>to top left<br>ä»å³ä¸è§å°å·¦ä¸è§</li>
-</ul>
-<h3 id="Note"><a href="#Note" class="headerlink" title="Note"></a>Note</h3><ul>
-<li><code>background-image</code> ä¼å
级é«äº
<code>background-color</code>ï¼è¿æå³çåæ¶è®¾ç½®
<code>background-image</code> å
<code>background-color</code>ï¼<code>background-color</code> 被è¦çã</li>
-<li>ä¸è¦ä½¿ç¨ <code>background</code> ç®å.</li>
-</ul>
-<h3 id="示ä¾-2"><a href="#示ä¾-2" class="headerlink"
title="示ä¾"></a>示ä¾</h3><figure class="highlight html"><table><tr><td
class="code"><pre><div class="line"><span class="tag"><<span
class="name">template</span>></span></div><div class="line"> <span
class="tag"><<span class="name">scroller</span> <span
class="attr">style</span>=<span class="string">"background-color:
#3a3a3a"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container1"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to
right,#a80077,#66ff00);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"direction"</span>></span>to
right<span class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span c
lass="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container1"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to
left,#a80077,#66ff00);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"direction"</span>></span>to
left<span class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container1"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to
bottom,#a80077,#66ff00);"</span>></span></div><div class="line"> <span
class="tag"><<span class="na
me">text</span> <span class="attr">class</span>=<span
class="string">"direction"</span>></span>to bottom<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container1"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to
top,#a80077,#66ff00);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"direction"</span>></span>to
top<span class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="s
tring">"flex-direction: row;align-items: center;justify-content:
center"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container2"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to bottom
right,#a80077,#66ff00);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"direction"</span>></span>to
bottom right<span class="tag"></<span
class="name">text</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"> <span class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span class="string">"container2"</span> <span
class="attr">style</span>=<span
class="string">"background-image:linear-gradient(to top
left,#a80077,#66ff00);"</
span>></span></div><div class="line"> <span class="tag"><<span
class="name">text</span> <span class="attr">class</span>=<span
class="string">"direction"</span>></span>to top left<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">scroller</span>></span></div><div class="line"><span
class="tag"></<span class="name">template</span>></span></div><div
class="line"><span class="tag"><<span
class="name">style</span>></span><span class="css"></span></div><div
class="line"> <span class="selector-class">.container1</span> {</div><div
class="line"> <span class="attribute">margin</span>: <span
class="number">10px</span>;</div><div class="line"> <span
class="attribute">width</span>: <span clas
s="number">730px</span>;</div><div class="line"> <span
class="attribute">height</span>: <span class="number">200px</span>;</div><div
class="line"> <span class="attribute">align-items</span>: center;</div><div
class="line"> <span class="attribute">justify-content</span>:
center;</div><div class="line"> <span class="attribute">border</span>:
solid;</div><div class="line"> <span class="attribute">border-radius</span>:
<span class="number">10px</span>;</div><div class="line"> }</div><div
class="line"></div><div class="line"> <span
class="selector-class">.container2</span> {</div><div class="line">
<span class="attribute">margin</span>: <span
class="number">10px</span>;</div><div class="line"> <span
class="attribute">width</span>: <span class="number">300px</span>;</div><div
class="line"> <span class="attribute">height</span>: <span
class="number">300px</span>;</div><div class="line"> <span
class="attribute">align-items</span>: center;</div><div cla
ss="line"> <span class="attribute">justify-content</span>:
center;</div><div class="line"> <span class="attribute">border</span>:
solid;</div><div class="line"> <span class="attribute">border-radius</span>:
<span class="number">10px</span>;</div><div class="line"> }</div><div
class="line"></div><div class="line"> <span
class="selector-class">.direction</span> {</div><div class="line">
<span class="attribute">font-size</span>: <span
class="number">40px</span>;</div><div class="line"> <span
class="attribute">color</span>: white;</div><div class="line">
}</div><div class="line"><span class="tag"></<span
class="name">style</span>></span></div></pre></td></tr></table></figure>
-<h2 id="é´å½±-box-shadow-v0-11"><a href="#é´å½±-box-shadow-v0-11"
class="headerlink" title="é´å½±(box-shadow) v0.11+"></a>é´å½±(box-shadow)
<span class="api-version">v0.11+</span></h2><p>Weex
æ¯æé´å½±å±æ§ï¼<code>active</code>, <code>focus</code>,
<code>disabled</code>, <code>enabled</code>
<code>inset(å¯é)</code>,<code>offset-x</code>,<code>offset-y</code>,
<code>blur-radius</code>,<code>color</code></p>
-<h3 id="注æ"><a href="#注æ" class="headerlink"
title="注æ"></a>注æ</h3><ul>
-<li>box-shadowä»
ä»
æ¯æiOS</li>
-</ul>
-<h3 id="示ä¾-3"><a href="#示ä¾-3" class="headerlink"
title="示ä¾"></a>示ä¾</h3><figure class="highlight html"><table><tr><td
class="code"><pre><div class="line"><span class="tag"><<span
class="name">template</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">class</span>=<span
class="string">"wrapper"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="string">"width:400px;
height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69,
0);"</span>></span></div><div class="line"> <span class="tag"><<span
class="name">text</span> <span class="attr">class</span>=<span
class="string">"title"</span> <span class="attr">style</span>=<span
class="string">"text-align: center"</span>></span>Hello
{{target}}<span class="tag"></<span
class="name">text</span>></span></div><div class="
line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="string">"margin-top: 80px;width:400px;
height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69,
0, 0.8);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"title"</span> <span
class="attr">style</span>=<span class="string">"text-align:
center"</span>></span>Hello {{target}}<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="string">"margin-top: 80px;width:400px;
height:60px;background-color: #FFE4C4; box-shadow:inset
20px 10px 5px rgba(255, 69, 0, 0.8);"</span>></span></div><div
class="line"> <span class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"title"</span> <span
class="attr">style</span>=<span class="string">"text-align:
center"</span>></span>Hello {{target}}<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="string">"margin-top: 80px;width:400px;
height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255,
69, 0);"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"title"</span> <span
class="attr">style</span>=<span class="string">"text-align:
center"</span>></s
pan>Hello {{target}}<span class="tag"></<span
class="name">text</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"> <span class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<span class="string">"margin-top: 80px;width:400px;
height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px
black;"</span>></span></div><div class="line"> <span
class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"title"</span> <span
class="attr">style</span>=<span class="string">"text-align:
center"</span>></span>Hello {{target}}<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"><<span class="name">div</span> <span
class="attr">style</span>=<sp
an class="string">"margin-top: 80px;width:400px; height:60px;background-color:
#FFE4C4; box-shadow:20px 10px 5px #008B00;"</span>></span></div><div
class="line"> <span class="tag"><<span class="name">text</span> <span
class="attr">class</span>=<span class="string">"title"</span> <span
class="attr">style</span>=<span class="string">"text-align:
center"</span>></span>Hello {{target}}<span
class="tag"></<span class="name">text</span>></span></div><div
class="line"> <span class="tag"></<span
class="name">div</span>></span></div><div class="line"> <span
class="tag"></<span class="name">div</span>></span></div><div
class="line"><span class="tag"></<span
class="name">template</span>></span></div><div class="line"></div><div
class="line"><span class="tag"><<span class="name">style</span> <span
class="attr">scoped</span>></span><span class="css"></span></div><div
class="line"> <span class="selector-class">.wrapper</span> &
#123;<span class="attribute">align-items</span>: center; <span
class="attribute">margin-top</span>: <span
class="number">120px</span>;}</div><div class="line"> <span
class="selector-class">.title</span> {<span
class="attribute">font-size</span>: <span
class="number">48px</span>;}</div><div class="line"><span
class="tag"></<span class="name">style</span>></span></div><div
class="line"></div><div class="line"><span class="tag"><<span
class="name">script</span>></span><span class="javascript"></span></div><div
class="line"> <span class="built_in">module</span>.exports = {</div><div
class="line"> <span class="attr">data</span>: <span class="function"><span
class="keyword">function</span> (<span class="params"></span>)
</span>{</div><div class="line"> <span class="keyword">return</span>
{</div><div class="line"> <span class="attr">logoUrl</span>: <span
class="string">'https://alibaba.github.io/weex/img/weex_logo_b...@3x.png'</spa
n>,</div><div class="line"> <span class="attr">target</span>: <span
class="string">'World'</span></div><div class="line"> };</div><div
class="line"> }</div><div class="line"> };</div><div
class="line"><span class="tag"></<span
class="name">script</span>></span></div></pre></td></tr></table></figure>
-<h2 id="å
¶ä»åºæ¬æ ·å¼"><a href="#å
¶ä»åºæ¬æ ·å¼" class="headerlink"
title="å
¶ä»åºæ¬æ ·å¼"></a>å
¶ä»åºæ¬æ ·å¼</h2><ul>
-<li><code>opacity {number}</code>ï¼åå¼èå´ä¸º [0, 1]
åºé´ãé»è®¤å¼æ¯ 1ï¼å³å®å
¨ä¸éæï¼0 æ¯å®å
¨éæï¼0.5 æ¯ 50%
çéæ度ã</li>
-<li><code>background-color {color}</code>ï¼è®¾å®å
ç´
çèæ¯è²ï¼å¯éå¼ä¸ºè²å¼ï¼æ¯æRGBï¼ <code>rgb(255, 0, 0)</code>
ï¼ï¼RGBAï¼ <code>rgba(255, 0, 0, 0.5)</code> ï¼ï¼åå
è¿å¶ï¼
<code>#ff0000</code> ï¼ï¼ç²¾ç®åæ³çåå
è¿å¶ï¼ <code>#f00</code>
ï¼ï¼è²å¼å
³é®åï¼<code>red</code>ï¼ï¼é»è®¤å¼æ¯
<code>transparent</code> ã</li>
-</ul>
-<p><strong>注æï¼</strong> <a href="./color-names.html">è²å¼çå
³é®åå表</a>ã</p>
-<h2 id="ä¸ææ ·å¼"><a href="#ä¸ææ ·å¼" class="headerlink"
title="ä¸ææ ·å¼"></a>ä¸ææ ·å¼</h2><p>å¦æ对äºæ
·å¼åæ³éè¦æ´å¤ä¸æåèï¼å¯åèæ¯ä¸ªç»ä»¶çææ¡£ä¸ï¼é½æ常è§çä¾åå¯ä¾åèã</p>
-<p>ä½ å¯ä»¥æç
§ä»¥ä¸æ¥éª¤æ¥è§å Weex 页é¢çæ ·å¼ã</p>
-<ol>
-<li>å
¨å±æ ·å¼è§åï¼å°æ´ä¸ªé¡µé¢åå²æåéç模åã</li>
-<li>flex å¸å±ï¼æåå对é½é¡µé¢æ¨¡åã</li>
-<li>å®ä½çåï¼å®ä½å¹¶è®¾ç½®å移éã</li>
-<li>ç»èæ ·å¼å¤çï¼å¢å ç¹å®çå
·ä½æ ·å¼ã</li>
-</ol>
-
- </div>
-
-</article>
-</div>
-
- <footer id="footer">
- <div class="row clearfix">
- <div class="dropdown select-lang">
- <a href="javascript:;" class="dropdown-toggle">
- Language
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu pick-lang">
- <li>
- <a href="/references/common-style.html" data-lang="en">English</a>
- </li>
- <li>
- <a href="/cn/references/common-style.html"
data-lang="zh-cn">ä¸æ</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="disclaimer">
- <div><img
src="//gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" width="200px"
alt="Apache Incubator"></div>
- <div><span class="title">Disclaimer:</span> Apache Weex is an effort
undergoing incubation at The Apache Software Foundation (ASF), sponsored by the
Apache Incubator. Incubation is required of all newly accepted projects until a
further review indicates that the infrastructure, communications, and decision
making process have stabilized in a manner consistent with other successful ASF
projects. While incubation status is not necessarily a reflection of the
completeness or stability of the code, it does indicate that the project has
yet to be fully endorsed by the ASF.</div>
- <br/>
- </div>
- <hr>
- <div class="row">
- <p> <img src="//gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png"
height="50px" alt="Apache"><span>Copyright(c) 2017 The Apache Software
Foundation. Licensed under the </span> <a
href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version
2.0</a></p>
- </div>
- <div class="row clearfix">
- <div></div>
- </div>
-</footer>
- <div style="display: none;">
- <script src="//s95.cnzz.com/z_stat.php?id=1261496509&web_id=1261496509"
language="JavaScript"></script>
-</div>
-
- <script src="/js/reqwest.js"></script>
- <script src="/js/common.js"></script>
-</body>
-</html>