欢迎使用kuoqi.wap布局方式

感谢阅读kuoqiwap布局框架系统,本站所有模块简称为Kwap

kwap是一个针对移动设备的html布局框架,主要包含两个初始化文件[wap.css与app.js]

快速引用以下代码进行测试

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="http://res.kuoqps.com/layout/wap.css"><script type="text/javascript" src="http://res.kuoqps.com/main/kq.1.06/kq.1.06.js"></script><script type="text/javascript" src="http://res.kuoqps.com/layout/app.js"></script>

系统支持栅格化布局

栅格化布局使用display:flex为基础,划分一个区块出来,供row-col模式使用,该区块支持行级区块[.container]与行内区块[.container-in],与自动内容竖向居中模式[.container-ch]

在区块中使用[row]格式化区块中的一行,使用col-*来进行切分区块大小,如果确定区块大小使用[col-auto]来主动占据宽度大小,和使用[col-other]来自动平分剩余空间大小

[row]默认为常规带换行的

[row-flex]将下级信息转换为单行模式

系统文本相关处理

[.text-c]:文本绝对居中对齐

[.text-ch]:文本垂直居中对齐

卡片系统

[.card]:基础调用卡片模块

[.card.card-normal]:基础格式化的卡片

[.card.card-marquee]:卡片走马灯效果,单行显示超出部分手动滑动查看

图片优化

[img.img]基础图片优化,保证最大宽度100%

[img.img-circle]图片做完整的圆角处理,转换为圆形的图片

[img.img-rounds-0]图片转换为方形图片

[img.img-rounds-1]图片自动倒10%的圆角

[img.img-rounds-2]图片自动倒20%的圆角

[img.img-rounds-3]图片自动倒30%的圆角

[img.img-rounds-4]图片自动倒40%的圆角

[img.img-rounds-5]图片自动倒50%的圆角

[img.img-rounds-6]图片自动倒60%的圆角

[img.img-rounds-7]图片自动倒70%的圆角

[img.img-rounds-8]图片自动倒80%的圆角

[img.img-rounds-9]图片自动倒90%的圆角

颜色填充

[.fill-white]将整个盒子元素填充为白色

倒圆角

[.fill-rounds-1]倒0.125rem的圆角

[.fill-rounds-2]倒0.25rem的圆角

[.fill-rounds-3]倒0.375rem的圆角

[.fill-rounds-4]倒0.5rem的圆角

[.fill-rounds-5]倒0.625rem的圆角

[.fill-rounds-6]倒0.75rem的圆角

[.fill-rounds-7]倒0.875rem的圆角

[.fill-rounds-8]倒1.0rem的圆角

[.fill-rounds-9]倒1.25rem的圆角

[.fill-rounds-10]倒1.5rem的圆角

[.fill-roundp-1]倒10%的圆角

[.fill-roundp-2]倒20%的圆角

[.fill-roundp-3]倒30%的圆角

[.fill-roundp-4]倒40%的圆角

[.fill-roundp-5]倒50%的圆角

[.fill-roundp-6]倒60%的圆角

[.fill-roundp-7]倒70%的圆角

[.fill-roundp-8]倒80%的圆角

[.fill-roundp-9]倒90%的圆角

[.fill-roundr-1]倒1rem的圆角

[.fill-roundr-2]倒2rem的圆角

[.fill-roundr-3]倒3rem的圆角

[.fill-roundr-4]倒4rem的圆角

[.fill-roundr-5]倒5rem的圆角

[.fill-roundr-6]倒6rem的圆角

[.fill-roundr-7]倒7rem的圆角

[.fill-roundr-8]倒8rem的圆角

[.fill-roundr-9]倒9rem的圆角