AppCan应用开发 UI 样式说明

动画效果定义：utra说明：utra定义：-webkit-transition:all300msease-in100ms,:所有可过渡的css属性、动画持续时间300ms、动画的过渡效果是缓慢型的、动画延迟时间100ms元素透明效果定义：a-op说明：a-op定义：opacity:0，跟函数zy_anim_push（），zy_anim_pop（）搭配使用实现动画在执行过程中元素由不透明到透明，或由透明到不透明的过渡效果动画类型定义：a-mr，a-ml说明：a-mr定义：-webkit-transform:translateX（100%）指定对象X轴（水平方向）向右平移a-ml定义：-webkit-transform:translateX（-100%）指定对象X轴（水平方向）向左平移圆角类别定义：uc-［类型］［类型］［类别］说明：前缀为uc-，代表UICORNER类型为t带表TOP，l代表LEFT，b代表BOTTOM，r代表RIGHT，a代表ALL类别为数字编号，用于定义不同大小的圆角例子：uc-t代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.6em的圆角uc-tl代表左上圆角。类别为空，定义的为圆角半径为0.6em的圆角uc-t1代表上圆角即左上和右上圆角。类别为空，定义的为圆角半径为0.3em的圆角场景：<divclass='btnubab-blauinn5c-bluc-m1uc-at-wh'>确定</div>图例：确走外阴影类别定义：us［类别］说明：前缀为us，代表UISHADOW类别为数字编号，用于定义不同大小和不同颜色的外阴影例子：us代表外阴影。类别为空，定义的外阴影颜色为黑色us1代表外阴影。类别为1，定义外阴影颜色为灰白色场景：us'>确定</div><divclass='btnubab-blauinn5c-blu2c-m1uc-at-wh

us'>确定</div>图例:（使用us外阴影效果）（未使用us外阴影效果）内阴影类别定义：us-i［图例:（使用us外阴影效果）（未使用us外阴影效果）内阴影类别定义：us-i［类别］说明：前缀为us-i,代表UISHADOWINSET类别为数字编号，用于定义不同大小和不同颜色的内阴影例子：us-i代表内阴影。类别为空，定义内阴影大小及阴影颜色为黑色场景:<divclass='btnubab-blauinn5c-blu2c-m1uc-at-whus-i'>确定</div>图例:文字阴影定义：uts说明:用于定义文字的阴影效果例子：uts代表内阴影。定义文字阴影大小及阴影颜色场景：<divclass='btnubauc-ab-blauinn5c-blu2c-m1t-wh uts'>确定</div>图例：body样式定义：um-vp说明：um-vp代表UIMOBILEVIEWPORTum-vp定义body的内边距padding，外边距margin的大小以及文字大小可以调整，超过body宽度的部分隐藏场景：<bodyclass='um-vp'></body>页面样式定义：up说明：up，代表UIPAGEup一般和um-vp搭配使用，用于定义页面大小自适应手机屏幕大小场景：<bodyclass='um-vp'><divclass='up'></div></body>跟头部和底部有关的样式定义：.uh,.uf.up.uh,.up.uf说明：uh,代表UIHEADERuf,代表UIFOOTERuh和uf定义头部和底部的元素的一些基本属性场景：<divid='page_0'class='upubub-ver'tabindex='0'><!--header开始--><divid='header'class='uhc-orgc-m1t-wh'><h1class='utulev0ut-stx-c'tabindex='0'>AppCan</h1></div><!--header结束--><!--content开始--><divid='content'class='ub-f1tx-luinn2t-blaub-img6res10'></div><!--content结束--><!--footer开始--><divid='footer'class='ufc-m2c-blat-wh'><h1class='utulev-2tx-c'tabindex='0'>(c)Copyright3G2WINandothers2011.<br>Allrightsreserved.</h1></div><!--footer结束--></div>图例:tc}CDPTrldrt3G3XTJKend 2011.Jillxidxts头部和底部内文本区域的样式定义：.ut说明：ut,代表UITITLE定义头部和底部的内边距和外边距的大小场景：<divid='header'class='uhc-orgc-m1t-wh'><h1class='utulev0ut-stx-c'tabindex='0'>AppCan</h1></div><divid='footer'class='ufc-m2c-blat-wh'><h1class='utulev-2tx-c'tabindex='0'>(c)Copyright3G2WINandothers2011.<br>Allrightsreserved.</h1></div>浮动类别定义：uf淡型］说明：前缀为uf，代表UIFLOAT用于定义元素的浮动方向例子：ufl代表元素左浮动ufr代表元素右浮动字体大小类别定义：ulev淡别］说明：前缀为ulev类别为数字编号，用于定义不同大小的字体；其中数值越大代表字体大小越大，数值越小代表字体大小越小例子：ulev0类别为0，定义的字体大小为1emulevl类别为1，定义的字体大小为1.2emulev-1类别为-1，定义的字体大小为0.8em场景：<divclass='ulev2uinnc-bluc-m1uc-a1tx-ct-wh'> 确定</div><divclass='ulev-1uinnc-bluc-m1uc-a1tx-ct-wh'>确定</div>图例：确定限制宽度大小定义：ulim说明：ulim定义元素的最大宽度超过部分省略例子：ulev0类别为0，定义的字体大小为1emulevl类别为1，定义的字体大小为1.2emulev-1类别为-1，定义的字体大小为0.8em场景：<divclass='ulimulev-1uinn5c-bluc-m1uc-a1tx-ct-wh'> 确定确定确定确定确定确定</div>图例：单行类别定义：uinl说明：用于定义元素为行内元素场景：<divclass='btnubab-blauinn2uinlc-bluc-m1uc-at-wh'>确定</div>图例:（未使用uinl）（使用uinl）内边距类别定义：uinn［类别］说明：前缀为uinn类别为数字编号，用于定义不同内边距的大小例子：uinn类别为空，定义的内边距大小上右下左均为0.5emuinnl类别为1，定义的内边距大小上下为0，左右为0.5em场景：<divclass='btnubab-blauinnc-bluc-m1uc-at-wh'>确定</div>图例:（使用uinn5）最小高度类别定义：umh［类别］说明：前缀为umh类别为数字编号，用于定义不同大小的最小高度例子：umhl类别为1，定义最小高度为1emumh2类别为2，定义最小高度为1.2em场景：<divclass='tx-cumh1uinnc-blac-m1uc-at-wh'>确定</div>图例：魂定（使用umh1）确定（使用umh3）最小宽度类别定义：umw［类别］说明：前缀为umw类别为数字编号，用于定义不同大小的最小宽度例子：umwl类别为1，定义最小宽度为1emumw2类别为2，定义最小宽度为2em场景：<divclass='uinnuinlc-blaumw1c-m1uc-at-wh'>确定</div>图例：（使用uww1）（使用umw3）文字对齐方向定义：tx-［类型］说明：前缀为tx-类型为l代表LETT,r代表RIGHT,c代表CENTER用于定义文字的对齐方向例子：tx-l代表左对齐tx-r代表右对齐tx-c代表居中对齐场景：<divclass='uinnc-blu2c-m1uc-a1tx-lt-wh'>确定</div>图例：确定（使用tx-l）确定（使用tx-c）超出指定宽度隐藏并且文字不换行定义：ut-s说明：用于定义文字超过容器指定宽度时文字隐藏并且文字不换行场景：<divclass='uinnc-blu2c-m1uc-a1tx-cut-st-wh'style='width:5em;'>确定确定确定确定</div>图例:边框类别定义：ub［类型］［类别］说明：前缀为ub类型为t带表TOP,l代表LEFT,b代表BOTTOM,r代表RIGHT,a代表ALL类别为数字编号，用于定义不同大小的边框例子：ub-t代表上边框。类别为空，定义的边框宽度为1pxub-l代表左边框。类别为空，定义的为边框宽度为1pxuba代表四个边的边框。类别为空，定义的边框宽度为1pxuba1代表四个边的边框。类别为1，定义的边框宽度为2px场景：<divclass='ubab-blauinnc-bluc-m1uc-a1tx-ct-wh'> 确定</div><divclass='uba1b-blauinnc-bluc-m1uc-a1tx-ct-wh'> 确定</div>图例:隐藏元素定义：uhide说明：代表元素隐藏display属性为none场景：<divclass='uhide'>确定</div>外边距类别定义：umar-［类型］说明：定义外边距的大小类型为t代表TOP定义上边距大小，b代表BOTTOM定义下边距大小，l代表LEFT定义左边距大小，r代表RIGHT定义右边距大小，a代表ALL定义上、下、左、右四个方向的边距大小例子：umar-t代表上边距。定义的上边距的大小为margin-top：0.4emumar-b代表下边距。定义的下边距的大小margin-bottom:0.4emumar-1代表左边距。定义的下边距的大小margin-left:0.4em

umar-r代表下边距。定义的右边距的大小margin-right:0.4emumar-a代表上下左右四个边的边距。定义margin：0.4em场景：确定</div>确定</div><divclass='btnubab-blaumar-tuinn5c-bluc-m1uc-a1t-wh'> 确定</div>图例:厂涌定图例:厂涌定内容溢出元素框时，超出的部分隐藏定义：uof-类型］说明：uof-x：类型为x时，定义oveflow-x：hidden；超出容器的指定宽度时，横向超出的部分隐藏uof-y：类型为y时，定义oveflow-y：hidden；超出容器的指定高度时，纵向超出的部分隐藏uof：类型为空时，定义overflow：hidden；内容溢出元素框时，溢出的部分隐藏定位元素定义：uabs说明:定义元素位于页面的左上角，position:absolute;left:0px;top:0px;Box架构定义：ub说明：使用box弹性盒子模式对页面进行布局例子：ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间，ub一般跟ub-f[1-4]搭配着使用Box架构元素空间大小分配比例定义：ub-f说明：定义不同的box-flex属性值类别使用数字编号，定义不同的元素空间大小分配比例例子：ub-f1数字编号为1；定义box-flex：1ub-f1数字编号为2；定义box-flex：2ub-f1数字编号为3；定义box-flex：3ub-f1数字编号为4；定义box-flex：4ub-f[1-4]和ub搭配着使用解析:1、若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小<divclass='ubc-graubab-blaumh5'><divclass='ub-f1c-org'></div><divclass='ub-f1c-blu2'></div></div>2、若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小<divclass='ubc-graubab-blaumh5'><divclass='ub-f1c-org'></div><divclass='ub-f2c-blu2'></div></div>3、若子元素分别使用ub-f1，ub-f2,ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小<divclass='ubc-graubab-blaumh5'><divclass='ub-f1c-org'></div><divclass='ub-f2c-blu2'></div><divclass='ub-f3c-pink'></div></div>4、若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小<divclass='ubc-graubab-blaumh5'><divclass='c-org'>内容</div><divclass='ub-f1c-blu2'></div></div>ub-f[1-4]和ub搭配着使用场景：<divclass='ubab-grac-whusuc-a

<divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div><divontouchstart='zy_touch('btn-act')'class='ububbb-grat-blaub-aclisumh4'><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div><divontouchstart='zy_touch('btn-act')'class='uc-bubt-blaub-aclisumh4'><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div></div>图例：TOC\o"1-5"\h\z设置 OldPhone >设置 OldPhQM >设置 OldPhone >Box架构元素垂直方向的位置排列定义：ub-ac,ub-ae说明：ub-ac:垂直居中ub-ae：位于底边只有跟ub搭配着使用ub-ac,ub-ae的作用才生效例子：1、未使用ub-ac，ub-ae<divclass='ubuinnumh4ubab-grauc-a'><divclass='ub-f1'>内容</div><divclass='res8lis-swub-img'></div></div>内容2、使用ub-ac<divclass='ubuinnumh4ubab-grauc-aub-ac'><divclass='ub-f1'>内容</div>

</div>内容 >3、使用ub-ae<divclass='ubuinnumh4ubab-grauc-aub-ae'><divclass='ub-f1'>内容</div><divclass='res8lis-swub-img'></div></div>内容 >场景：<divclass='ubab-grac-whusuc-a'><divontouchstart='zy_touch('btn-act')'class='uc-tubbubb-grat-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'>></div></div><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div><divontouchstart='zy_touch('btn-act')'class='uc-bubt-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div></div>图例:OldPhone>OldPhone>GidFhone>Box架构元素水平方向的位置排列定义：ub-pc,ub-pe,ub-pj说明:ub-pc:水平居中ub-pe：位于末尾ub-pj:两端对齐只有跟ub搭配着使用ub-pc,ub-pe,ub-pj的作用才生效例子：1、未使用ub-pc，ub-pe，ub-pj<divclass='uinn2c-graub'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>2、使用ub-pc2、使用ub-pc<divclass='uinn2c-graub-pcububab-bla'><divclass='umh5umw3c-org'></div>

<divclass='umh5umw3c-pink'></div></div>3、使用ub-pe<divclass='uinn2c-graub-peububab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>4、使用ub-pj<divclass='uinn2c-graub-pjububab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-pink'></div></div>Box架构元素垂直排列定义：ub-ver说明：ub-ver:定义元素垂直排列只有跟ub搭配着使用ub-ver的作用才生效例子：1、未使用ub-ver<divclass='uinn2c-graububab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>2、使用ub-ver<divclass='uinn2c-graubub-verubab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>Box架构元素排列方向定义：ub-rev说明：ub-rev：定义元素排列方向只有跟ub搭配着使用ub-rev的作用才生效例子:1、未使用ub-rev<divclass='uinn2c-graububab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>2、使用ub-rev<divclass='uinn2c-graubub-revubab-bla'><divclass='umh5umw3c-org'></div><divclass='umh5umw3c-blu2'></div><divclass='umh5umw3c-pink'></div></div>Box架构实现横向滑动效果定义:ub-fh说明：在box架构中ub-fh一般跟函数zyFlip()搭配着使用实现横向滑动效果Box架构实现纵向滑动效果定义：ub-fv说明：在box架构中ub-fv一般跟函数iScroll()搭配着使用实现纵向滑动效果背景图片类别定义：ub-img［类别］说明：前缀为ub-img类别为数字编号，用于定义不同的背景排列方式例子：ub-img类别为空，定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终包含在容器内ub-img1类别为1，定义将背景图片等比例缩放到完全覆盖容器，背景图像有可能超过容器ub-img2类别为2,定义背景图像横向平铺ub-img3类别为3,定义背景图像纵向平铺

ub-img4类别为4,定义背景图像横向100%,纵向自适应;ub-img5类别为5,定义背景图像横向自适应，纵向为100%ub-img6类别为6,定义背景图像居中显示场景：<divclass='ubab-grac-whusuc-a'><divontouchstart='zy_touch('btn-act')'class='uc-tubbubb-grat-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div><divontouchstart='zy_touch('btn-act')'class='ububbb-grat-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div><divontouchstart='zy_touch('btn-act')'class='uc-bubt-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div>

<divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div></div>图例：TOC\o"1-5"\h\z设置 Old Phone >设置 Old Phorue >既设置 Old >按钮位置定义：btn-［位置］说明：前缀为btnbtn-l用于定义按钮居左显示，一般用于头部或底部跟uh,uf搭配着使用，例如.uh.btn-l,.uf.btn-lbtn-r用户定义按钮居右显示，一般用于头部或底部跟uh，uf搭配着使用，例如.uh.btn-r,.uf.btn-r场景：<divid='header'class='uhc-orgc-m1t-wh'><h1class='utulev0ut-stx-c'tabindex='0'><divontouchstart='zy_touch('btn-act')'class='btnubab-blauinnbtn-lc-blac-m1uc-aAppCan<divontouchstart='zy_touch('btn-act')'class='btnubab-blauinnbtn-rc-blac-m1uc-at-wh'>确定</div></h1></div>图例：fife定 AppCan 确定按钮类型定义：btn-［类型］说明：前缀为btnbtn-a用于定义iphone风格的箭头按钮btn-n用户定义iphone风格的编辑按钮，一般用于头部或底部场景：<divid='header'class='uhc-orgc-m1t-wh'><h1class='utulev0ut-stx-c'tabindex='0'><divclass='btnbtn-lbtn-aubub-ac'><divclass='ulim'>按钮</div></div>AppCan<divclass='btnbtn-rbtn-nubub-ac'><divclass='ulim'>按钮</div></div></h1></div>图例：按钮样式定义：btn说明：btn用于定义按钮中的字体大小、文字居中显示图例：（使用btn）（未使用btn）

按钮激活状态定义：btn-act说明：btn-act用于定义按钮激活时的状态，一般跟zy_touch（）函数搭配着使用实现效果场景：<divontouchstart='zy_touch('btn-act')'class='btnubab-blauinn5c-blu2c-m1uc-at-wh'>确定</div>图例:（按钮正常状态）（按钮激活时的状态）背景遮盖类别定义：c-m［位置］说明：前缀为c-m类别为数字编号，用于定义不同色彩的透明渐变遮盖层例子：c-m1类别为1，定义白色的透明渐变层c-m6类别为6,定义黑色的透明渐变层c-m7类别为7,定义另外一种黑色的透明渐变层ui2.0框架中一共提供了十二种渐变层其中c-m［1-5］是白色的透明渐变层，c-m［6-10］是黑色的透明渐变层场景：<divclass='btnubab-blauinn5c-bluc-m1 uc-at-wh'>确定</div><divclass='btnubab-blauinn5c-bluc-m6 uc-at-wh'>确定</div>图例：Q Q背景底色类别定义：c-［色值］［类别］说明：前缀为c-色值为不同颜色类别为数字编号，用于定义颜色的不同取值范围例如c-blu为深蓝色c-blu1为蓝色c-blu2为浅蓝色例子:c-bla,定义黑色底色c-blu，定义深蓝色底色c-blu1,定义蓝色底色c-blu2，定义浅蓝色底色c-red，定义红色底色场景：<divclass='btnubab-blauinn5c-blauc-at-wh'>确定</div><divclass='btnubab-blauinn5c-blu2uc-at-wh'>确定</div>图例:文字色彩类别定义：卜［色彩］［类别］说明:前缀为t-色彩是颜色的分类例如黑色，白色，红色类别为数字编号，用于定义不同色彩，例如黑色里面也可以划分为不用颜色深度的黑色例子：t-bla，定义黑色文字色t-wh，定义白色文字t-blu，定义蓝色文字场景:<divclass='btnubab-blauinn5c-blu2c-m1uc-at-wh' >确定</div><divclass='btnubab-blauinn5c-blu2c-m1uc-at-bla' >确定</div>图例:边框色彩类别定义：b-［色彩］［类别］说明：前缀为b-色彩是颜色的分类例如黑色，白色，红色类别为数字编号，用于定义不同色彩，例如黑色里面也可以划分为不用颜色深度的黑色例子：b-bla，定义黑色边框b-wh，定义白色边框b-blu，定义蓝色边框场景：<divclass='btnuba1b-blauinn5c-grac-m1uc-at-bla'>确定</div><divclass='btnuba1b-bluuinn5c-grac-m1uc-at-bla'>确定</div>图例：确定确定折叠列表图片定义：col-icon说明：定义折叠列表展开或者关闭时列表上图标的变换例子：input[type=checkbox]+div>div.col-icon定义列表未展开时的图标

input[type=checkbox]:checked+div>div.col-icon定义列表展开后使用的图标InsertYourCoEnponentathere;场景:<divclass='ubab-blauc-a1umar-b'><inputtype='checkbox'class='uhide'><divontouchstart='zy_touch('btn-act')'onclick='zy_for(event,zy_fold);'class='uc-a1t-whubuinnub-acc-m2c-blucolulev-1umh4'><divclass='ub-f1ut-s'>确定</div><divclass='umh1umw1ub-imgcol-iconc-blauc-a'></div></div><divclass='uinnumh6t-blaus-ic-whuc-b1col-c'>InsertYourComponentathere;</div>列表展开时圆角的变化定义：列表展开时圆角的变化</div>列表展开时圆角的变化定义：列表展开时圆角的变化说明:col跟复选框选中状态搭配着使用，定义列表展开时的圆角变化

input[type=checkbox]:checked+div.col确定确定InsertYourCoEnponentathere;场景：<divclass='ubab-blauc-a1umar-b'><inputtype='checkbox'class='uhide'><divontouchstart='zy_touch('btn-act')'onclick='zy_for(event,zy_fold);'class='uc-a1t-whubuinnub-acc-m2c-blucolulev-1umh4'><divclass='ub-f1ut-s'>确定</div><divclass='umh1umw1ub-imgcol-iconc-blauc-a'></div></div><divclass='uinnumh6t-blaus-ic-whuc-b1col-c'>InsertYourComponentathere;</div></div>折叠列表的内容区域定义：col-c说明：默认情况下：col-c定义折叠列表的内容区域是隐藏的即display:none,col-c跟zy_fold函数搭配着使用当列表展开时通过zy_fold函数将列表的col-c类名去掉，列表的内容区域显示例子：<divclass='ubab-blauc-a1umar-b'><inputtype='checkbox'class='uhide'><divontouchstart='zy_touch('btn-act')'onclick='zy_for(event,zy_fold);'class='uc-a1t-whubuinnub-acc-m2c-blucolulev-1umh4'><divclass='ub-f1ut-s'>确定</div><divclass='umh1umw1ub-imgcol-iconc-blauc-a'></div></div><divclass='uinnumh6t-blaus-ic-whuc-b1col-c'>InsertYourComponentathere;</div></div>确定确定InsertYourComponentathere;图片类别定义:im［类别］说明：类别用数字表示，代表不同图片例子：1、im类别为空，定义了列表中默认使用的图片设置didFhoiiis>设置<divontouchstart='zy_touch('btn-act')'class='uc-aubaubb-grat-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div>2、im1、im2定义了带缩略图的列表中使用的资源图片<divontouchstart='zy_touch('btn-act')'class='uc-aubaubb-grat-blaub-aclis'><divclass='lis-thub-imgim'></div><divclass='ub-f1ubub-ver'><divclass='ulev1'>标题名</div>

<divclass='ubub-act-graulev-2'><divclass='umh2umw2ub-imgim1'></div><divclass='ub-f1'>收藏数</div><divclass='umh2umw2ub-imgim2'></div><divclass='ub-f1'>评论数</div></div></div></div>JJ标耘名文本说明输入框和文本区域的样式定义：uinput说明:定义文本框和文本区域的基本样式，内边距，外边距，边框，背景颜色，宽度和高度uinput一般跟input和textarea搭配着使用实现输入框或文本区域的样式例如.uinputinput，.uinputtextarea例子：

<inputplaceholder='hello'type='text'class='uc-a1'></div>带标签时输入框和文本区域的样式定义：ulab说明：ulab一般跟uinput搭配着使用.ulab.uinput{margin-left:3px},用于定义标签和输入框之间的距离hello例子：hello标签标签<divclass='ubt-blaulab'><divclass='uinnulim'>标签标签</div><divclass='ub-f1ubauc-a1b-blaus-iuinputuinn4'><inputplaceholder='hello'type='text'class='uc-a1'></div></div>单选按钮（垂直排列）定义：rdi-icon说明：用于定义单选按钮使用的图标根据单选按钮的状态定义选中或着未选中的图标例子:input[type='radio']:checked+div>div.rdi-icon定义垂直排列的单选按钮选中后使用的图片的图iteminput[type=radio]+div>div.rdi-icon定义垂直排列的单选按钮未选中时使用的图片iteio场景：<inputtype='radio'name='rdi1'class='uhide'checked='checked'id='radio-1-1'value=''><divonclick='zy_for(event)'ontouchstart='zy_touch('btn-act')'class='ubuc-a1ubac-blac-m2b-blat-whui-rdiuinn5'><divclass='ub-f1ut-stx-l'style=''>item</div><divclass='rdi-iconub-imgumw1'></div></div>单选按钮(水平排列)定义：rdi说明：用于定义水平排列的单选按钮选中后的样式例子:input[type='radio']:checked+div.rdi场景：<divclass='ubuc-a1t-whc-blac-m2ubab-blatx-c'><inputtype='radio'name='rdi1'class='uhide'value=''><divonclick='zy_for(event)'class='uinn5ubrb-blauc-l1ub-f1che'>item</div><inputtype='radio'name='rdi1'class='uhide'value=''><divonclick='zy_for(event)'class='uinn5ubrb-blaub-f1che'>item</div><inputtype='radio'name='rdi1'class='uhide'value=''><divonclick='zy_for(event)'class='uinn5b-blauc-r1ub-f1che'>item</div></div>复选框(垂直排列)定义：che-icon说明：用于定义复选框选中或未选中时使用的图标根据复选框的状态定义选中或着未选中的图标例子：input[type=checkbox]+div>div.che-icon定义垂直排列的复选框未选中时使用的图片ittftiinput[type=checkbox]:checked+div>div.che-icon定义垂直排列的复选框选中后使用的图片item场景：<divclass='btnubab-blauinn5c-blu2c-m1uc-at-wh' >确定</div><divclass='btnubab-blauinn5c-blu2c-m1uc-at-bla' >确定</div>复选框（水平排列）定义：che说明：用于定义复选框水平排列时选中后的样式例子：input[type=checkbox]:checked+div.cheitemitemitem场景：<divclass='btnuba1b-blauinn5c-grac-m1uc-at-bla'>确定</div><divclass='btnuba1b-bluuinn5c-grac-m1uc-at-bla'>确定</div>下拉列表定义：selselect说明：用于定义下拉列表的样式例子：下按列表场景：<divclass='btnuba1b-blauinn5c-grac-m1uc-at-bla'>确定</div><divclass='btnuba1b-bluuinn5c-grac-m1uc-at-bla'>确定</div>列表样式定义：lis说明：lis用于定义列表的padding距离例子：<divontouchstart='zy_touch('btn-act')'class='uc-aubaubb-grat-blaub-acumh4lis'><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></div></div>图例:设置 OldPhone>列表图片定义：lis-［图片类型］说明：前缀为lis-lis-icon用于定义列表中的图片为图标时使用的样式lis-th用于定义列表中的图片为缩略图时使用的样式lis-sw用于定义列表中具有标识作用的图标的样式例如箭头例子：1、使用lis-icon，定义列表图标<divontouchstart='zy_touch('btn-act')'class='uc-aubaubb-grat-blaub-aclis'><divclass='lis-iconub-imgim'></div><divclass='ub-f1ut-s'>设置</div><divclass='tx-rt-bluulev-1'>OldPhone</div><divclass='res8lis-swub-img'></