微信小程序样式框架的扩展v1.0

shuke 2017-11-21 1714

使用微信小程序过程中发现对于布局的两个盒子,VIEW和TEXT是够用的;

但是往往JSON接口传入的数据会出现大量的H5标签;所以最好有一个完整的样式框架来支持H5的标签,所以第一版本出现

/*!

* skUI + WeUI v1.1.1

* Copyright 2017. shuke, Inc.

* Licensed under the MIT license

*/


/*html5 tag  */

div,p,header,nav,article,section,aside,footer,figure,figcaption,ul,li,ol,dt,dd,dl,table,tr,caption,address,blockquote,pre,br,hr,hgroup{display: block}

/*table  */

table{display: table;background:#fcfcfc;border:solid silver 1px;border-bottom:0;border-left:0;}

table tr{border-bottom: solid silver 1px;display: flex}

table tr td,table tr th{display: table-cell;border-left:solid silver 1px;padding:2px;flex: 1}

/*h1=hb,h2=hm,h3=hs,h4=hl  */

hl,hs,hm,hb.h{display: block;}

hb,.h1{font-size: 150%;font-weight: bold}

hm,.h2{font-size: 120%;font-weight: bold}

hs,.h3{font-size: 110%;font-weight: bold}

hl,.h4{font-size: 90%;font-weight: bold}

/* tag */

hr{border-bottom:solid 1px silver}

input{background-color: white;text-rendering: auto;color: initial;text-transform: none;    text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;font: 13.3333px Arial;user-select: text;padding: 1px 0;border-width: 2px;border-style: inset;border-color: initial;border-image: initial}

b,strong{font-weight: bold}

del{text-decoration: line-through}

i,em{font-style:italic}

u{text-decoration: underline}

a{color:darkblue}

small{font-size:85%}

big{font-size: 125%}

我们发现对于h1到H6标签没有相应样式是为什么?一下篇我会针对性的整理出来应对代码!


最新回复 (0)
全部楼主
返回