シンプルなページレイアウト[アプレット]アプレットのフレームワーク

1.まず、アプレット開発ツールをダウンロード

2.同等のHTML wxmlアプレット、wxss同等のCSS

3.レイアウトはほぼ同じレイアウトとHTMLであります

4.パーセンテージ幅

5.inputテキストボックスは、パディングにより差し出す垂直方向に中央揃えされます

6.右下のテキストは、ビューは、設定された幅は、右揃えテキストは、整列ブロック要素に対応します

図の簡単なテスト・インタフェース

index.wxmlコード

<！ - index.wxml - > 
< ビュークラス= "コンテナ" > 
< テキストクラス= "indexTitle" >添加邮箱账号</ テキスト> 
< ビュークラス= "indexInput" > 
  < 入力   MAXLENGTH = "10" プレースホルダ= "邮箱地址"  /> 
</ ビュー> 
< ビュークラス= "indexInput" > 
  < 入力   MAXLENGTH = "10" プレースホルダ= "密码" /> 
</ ビュー> 
<ビュークラス= "indexButton" > 
< ボタンタイプ= "プライマリ" >登录</ ボタン> 
</ ビュー> 
< ビュークラス= "indexNologin" > 
< HREF = "" >无法登录</ A > </ ビュー> < / ビュー>

コードindex.wxss

/ * * index.wxss * * / 
.indexTitle { 
  色：#CCC。
  マージン：15ピクセル0 ; 
  フォントサイズ：20ピクセル ;
} 
.indexInput { 
  マージン底：15ピクセル。
  国境：1pxの固体#CCC。
  パディング：11px 4PX。
  幅：90％ ; 
  国境半径：4PX。
} 
.indexButton { 
  パディング：0 4PX。
  幅：93％ ;
} 
.indexNologin { 
  色：＃049c4d。
  フォントサイズ：14px ; 
  マージントップ：10pxの ; 
  テキスト整列：右 ; 
  幅：93％ ;
}