<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <link rel="stylesheet" href="wap.css">
    <style>
       .main{
          max-width:640px;
          width:100%;
          margin:0 auto;
       }
       .main span{
          height:40px;
          background:#ddd;
       }
    </style>
</head>
<body>
  <div class="main">
     <div class="box mui-flex horizental justify-center">
       <span class="cell-2">1</span>
       <span class="cell">2</span>
     </div>
  </div>
</body>
</html>

  

a,body {
	color:#051b28
}
.ui-error,.ui-loading {
	text-align:center
}
blockquote,body,dd,dir,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,input[type=radio],input[type=checkbox],input[type=range],listing,menu,ol,p,plaintext,pre,ul,xmp {
	margin:0
}
button,dir,fieldset,input,input[type=radio],input[type=reset],input[type=checkbox],input[type=range],input[type=password],input[type=search],input[type=hidden],input[type=image],input[type=file],input[type=button],input[type=submit],isindex,legend,menu,ol,textarea,ul {
	padding:0
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:400
}
address,cite,dfn,em,i,var {
	font-style:normal
}
a:-webkit-any-link {
	text-decoration:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
a img,fieldset,iframe {
	border:none
}
ol,ul {
	list-style:none
}
button,input,select,textarea {
	font-family:inherit;
	font-weight:inherit;
	font-size:inherit;
	margin:0
}
button,input,select {
	color:inherit
}
html {
	-webkit-text-size-adjust:none;
	font-size:100px
}
body {
	font:.12rem/1.5 helvetica
}
a {
	text-decoration:none
}
.ui-error {
	padding:1em 0
}
@-webkit-keyframes rotate {
	from {
	-webkit-transform:rotate(0)
}
to {
	-webkit-transform:rotate(360deg)
}
}.ui-img-loading,.ui-loading i {
	-webkit-animation:rotate 1.2s linear infinite;
	background:url(data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNzk1ODUwQzlEMDhFMzExOTFBMkJBQUFCMkFDODIzRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RjIzMTM3QTMzM0MxMUUzODU3MDg3MTczRUU5MUI2OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RjIzMTM3OTMzM0MxMUUzODU3MDg3MTczRUU5MUI2OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFBOTU4NTBDOUQwOEUzMTE5MUEyQkFBQUIyQUM4MjNFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3OTU4NTBDOUQwOEUzMTE5MUEyQkFBQUIyQUM4MjNFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SXvjNwAAAvpJREFUeNqsl0toU0EUhm80baJWS7Wttj6qqIuCohhdKaQouBARVCgiCOJSV1KXblUEN+rCB/haCC4UdeFG1LrwLUERFB+oC0vF+G5o1TRp/A/8A9PjzM29sQc+bu4kM//MmXPOTBKVSiWIarlcznxcBPaCZeArOA+OgbJ8mclkqo6VdAxazeaBC6CB721gD2gE+6IOkjAr9gjXg6Jq2w+2On5bAsvBj2qi4pGko3082AE2clVvwRHwxFqxz3sdFE6ALrAQvAG3wag9HecYYCfYZrlyPjjEQcQ+eIRHQB/73QC3wAk+e7kVXuFJXKm2OrCFn0873C92kYF2AKxW32XBwTDh6XbAKWvj8yXYDl7z/Rc4wygX6/b073ZGNe0TGOYKtX20Pt8Da+mhPwwsYxM9whPCVjwILjk6/WauBo7fl1TbTY/wqPakI42OgyGwiQHxChwF7+x0CCkuPWAFaFee3O1zdYJuEtGzpBaT9FvCOOhkTJwDeXuSRngNo1lWWABXwPWgdvvCFAwtmSs5O2OTmccl5mCk2htiU0CzVQVlUgMivMHTYZ0RjmJ6ctxzWcRMqznF94RE9TTPWK3B/1uLp71ZhPs9X/aPgXCdp71ehK/qAk67PAbCw572ouyxbMZhsBnMAJ8p+tB1VscMNBlrlivqTTrlSE0Wcoko8MRq+SeqZQWq41SwiinwDdzlzONamq4ukCDskJAI38WwN2exVKFTnHkUa2XFSjN25HB5oe9jWni9JWpffySnT0a4m0nlW8rya8pwO5/Pwk6nDs+As9V7A7dCT3yOJarP8nSYq4ccKzbtZvWy/wtMWoD7PMECPbiyFI9X54ofeTo95rPLEjUTyVoeKXj6l3l2e119h7eLEb5XmM+9PDLnegbu5PM9bySuo7IU5moRvMbraBP4bs00VSV1Aoo+YDY08b1PXZucwvaVZlC1DXAg1wTy6pr0PNJfmGplkClU5jZk1RbJvj6NW12SMX8v/wp+gsW8NeYpWoxbx/8KMAC97sC/2v4BrgAAAABJRU5ErkJggg==) 50% 50% no-repeat;
	min-width:30px;
	min-height:30px
}
.ui-loading i {
	height:50px;
	width:50px;
	display:inline-block
}
#content,html .mui-cover>header {
	overflow:hidden
}
.mui-flex {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap
}
.mui-flex,.mui-flex *,.mui-flex:after,.mui-flex:before {
	box-sizing:border-box
}
.mui-flex.vertical {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column
}
.mui-flex.vertical.reverse {
	-webkit-box-orient:vertical;
	-webkit-box-direction:reverse;
	-webkit-flex-direction:column-reverse;
	-ms-flex-direction:column-reverse;
	flex-direction:column-reverse
}
.mui-flex.vertical .cell {
	width:auto
}
.mui-flex.vertical>.cell>.inner {
	position:absolute;
	width:100%;
	height:100%
}
.mui-flex.horizental {
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-webkit-flex-direction:row;
	-ms-flex-direction:row;
	flex-direction:row
}
.mui-flex.reverse {
	-webkit-box-orient:horizontal;
	-webkit-box-direction:reverse;
	-webkit-flex-direction:row-reverse;
	-ms-flex-direction:row-reverse;
	flex-direction:row-reverse
}
.mui-flex.justify-start {
	-webkit-box-pack:start;
	-webkit-justify-content:flex-start;
	-ms-flex-pack:start;
	justify-content:flex-start
}
.mui-flex.justify-end {
	-webkit-box-pack:end;
	-webkit-justify-content:flex-end;
	-ms-flex-pack:end;
	justify-content:flex-end
}
.mui-flex.justify-center {
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center
}
.mui-flex.justify-between {
	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between
}
.mui-flex.justify-around {
	-webkit-justify-content:space-around;
	-ms-flex-pack:distribute;
	justify-content:space-around
}
.mui-flex.align-start {
	-webkit-box-align:start;
	-webkit-align-items:flex-start;
	-ms-flex-align:start;
	align-items:flex-start
}
.mui-flex.align-end {
	-webkit-box-align:end;
	-webkit-align-items:flex-end;
	-ms-flex-align:end;
	align-items:flex-end
}
.mui-flex.align-center {
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center
}
.mui-flex.align-stretch {
	-webkit-box-align:stretch;
	-webkit-align-items:stretch;
	-ms-flex-align:stretch;
	align-items:stretch
}
.mui-flex.align-stretch .cell {
	height:auto!important
}
.mui-flex.center {
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center
}
.mui-flex>.cell {
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	width:0;
	-webkit-flex-basis:0;
	-ms-flex-preferred-size:0;
	flex-basis:0;
	max-width:100%;
	display:block;
	padding:0!important;
	position:relative
}
.mui-flex>.cell.fixed {
	-webkit-box-flex:0!important;
	-webkit-flex:none!important;
	-ms-flex:none!important;
	flex:none!important;
	width:auto
}
.mui-flex>.cell.align-start {
	-webkit-align-self:flex-start;
	-ms-flex-item-align:start;
	align-self:flex-start
}
.mui-flex>.cell.align-end {
	-webkit-align-self:flex-end;
	-ms-flex-item-align:end;
	align-self:flex-end
}
.mui-flex>.cell.align-center {
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	align-self:center
}
.mui-flex>.cell.align-stretch {
	-webkit-box-align:stretch;
	-webkit-align-items:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
	height:auto!important
}
.mui-flex .image-box {
	height:0;
	padding-bottom:100%;
	position:relative
}
.mui-flex .image-box>img {
	width:100%;
	height:100%;
	display:block;
	position:absolute
}
.mui-flex>.cell-1,.mui-flex>.cell-10,.mui-flex>.cell-11,.mui-flex>.cell-12,.mui-flex>.cell-2,.mui-flex>.cell-3,.mui-flex>.cell-4,.mui-flex>.cell-5,.mui-flex>.cell-6,.mui-flex>.cell-8,.mui-flex>.cell-9 {
	width:auto!important
}
.mui-flex>.cell-12 {
	-webkit-flex-basis:100%;
	-ms-flex-preferred-size:100%;
	flex-basis:100%;
	max-width:100%
}
.mui-flex>.order-12 {
	-webkit-box-ordinal-group:13;
	-webkit-order:12;
	-ms-flex-order:12;
	order:12
}
.mui-flex>.cell-11 {
	-webkit-flex-basis:91.66666667%;
	-ms-flex-preferred-size:91.66666667%;
	flex-basis:91.66666667%;
	max-width:91.66666667%
}
.mui-flex>.order-11 {
	-webkit-box-ordinal-group:12;
	-webkit-order:11;
	-ms-flex-order:11;
	order:11
}
.mui-flex>.cell-10 {
	-webkit-flex-basis:83.33333333%;
	-ms-flex-preferred-size:83.33333333%;
	flex-basis:83.33333333%;
	max-width:83.33333333%
}
.mui-flex>.order-10 {
	-webkit-box-ordinal-group:11;
	-webkit-order:10;
	-ms-flex-order:10;
	order:10
}
.mui-flex>.cell-9 {
	-webkit-flex-basis:75%;
	-ms-flex-preferred-size:75%;
	flex-basis:75%;
	max-width:75%
}
.mui-flex>.order-9 {
	-webkit-box-ordinal-group:10;
	-webkit-order:9;
	-ms-flex-order:9;
	order:9
}
.mui-flex>.cell-8 {
	-webkit-flex-basis:66.66666667%;
	-ms-flex-preferred-size:66.66666667%;
	flex-basis:66.66666667%;
	max-width:66.66666667%
}
.mui-flex>.order-8 {
	-webkit-box-ordinal-group:9;
	-webkit-order:8;
	-ms-flex-order:8;
	order:8
}
.mui-flex>.cell-7 {
	-webkit-flex-basis:58.33333333%;
	-ms-flex-preferred-size:58.33333333%;
	flex-basis:58.33333333%;
	max-width:58.33333333%;
	width:auto!important
}
.mui-flex>.order-7 {
	-webkit-box-ordinal-group:8;
	-webkit-order:7;
	-ms-flex-order:7;
	order:7
}
.mui-flex>.cell-6 {
	-webkit-flex-basis:50%;
	-ms-flex-preferred-size:50%;
	flex-basis:50%;
	max-width:50%
}
.mui-flex>.order-6 {
	-webkit-box-ordinal-group:7;
	-webkit-order:6;
	-ms-flex-order:6;
	order:6
}
.mui-flex>.cell-5 {
	-webkit-flex-basis:41.66666667%;
	-ms-flex-preferred-size:41.66666667%;
	flex-basis:41.66666667%;
	max-width:41.66666667%
}
.mui-flex>.order-5 {
	-webkit-box-ordinal-group:6;
	-webkit-order:5;
	-ms-flex-order:5;
	order:5
}
.mui-flex>.cell-4 {
	-webkit-flex-basis:33.33333333%;
	-ms-flex-preferred-size:33.33333333%;
	flex-basis:33.33333333%;
	max-width:33.33333333%
}
.mui-flex>.order-4 {
	-webkit-box-ordinal-group:5;
	-webkit-order:4;
	-ms-flex-order:4;
	order:4
}
.mui-flex>.cell-3 {
	-webkit-flex-basis:25%;
	-ms-flex-preferred-size:25%;
	flex-basis:25%;
	max-width:25%
}
.mui-flex>.order-3 {
	-webkit-box-ordinal-group:4;
	-webkit-order:3;
	-ms-flex-order:3;
	order:3
}
.mui-flex>.cell-2 {
	-webkit-flex-basis:16.66666667%;
	-ms-flex-preferred-size:16.66666667%;
	flex-basis:16.66666667%;
	max-width:16.66666667%
}
.mui-flex>.order-2 {
	-webkit-box-ordinal-group:3;
	-webkit-order:2;
	-ms-flex-order:2;
	order:2
}
.mui-flex>.cell-1 {
	-webkit-flex-basis:8.33333333%;
	-ms-flex-preferred-size:8.33333333%;
	flex-basis:8.33333333%;
	max-width:8.33333333%
}
.mui-flex>.order-1 {
	-webkit-box-ordinal-group:2;
	-webkit-order:1;
	-ms-flex-order:1;
	order:1
}
body {
	background-color:#f0f0f0
}

  

分享一段wap框架样式的更多相关文章

  1. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件

    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...

  2. 分享一段视频关于SQL2014 Hekaton数据库的

    分享一段视频关于SQL2014 Hekaton数据库的 Microsoft SQL Server In-Memory OLTP Project "Hekaton": App Dev ...

  3. 老李分享:大数据框架Hadoop和Spark的异同 1

    老李分享:大数据框架Hadoop和Spark的异同   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...

  4. 老李分享:qtp自动化测试框架赏析-关键字自动化测试框架

    老李分享:qtp自动化测试框架赏析-关键字自动化测试框架   QTP从2005年继winrunner,robot逐渐退出历史舞台之后,占领主流自动化测试工具市场已经10年之久.当初为了提高在自动化测试 ...

  5. 分享一段ios数据库代码,包括对表的创建、升级、增删查改

    分享一段ios数据库代码.包括创建.升级.增删查改. 里面的那些类不必细究,主要是数据库的代码100%可用. 数据库升级部分,使用switch,没有break,低版本一次向高版本修改. // DB.h ...

  6. angular动态绑定样式以及改变UI框架样式的方法

    一:angular动态绑定样式 举个栗子: <tr *ngFor="let dataTr of tableData;let i = index" [formGroupName ...

  7. 贾扬清分享_深度学习框架caffe

    Caffe是一个清晰而高效的深度学习框架,其作者是博士毕业于UC Berkeley的 贾扬清,目前在Google工作.本文是根据机器学习研究会组织的online分享的交流内容,简单的整理了一下. 目录 ...

  8. 分享一段Java搞笑的代码注释

    今天在群里看到有人分享了一段搞笑的注释代码,觉得挺好玩的,在这里收藏一下 // _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // ...

  9. 项目分享:通过使用SSH框架的公司-学员关系管理系统(CRM)

    ----------------------------------------------------------------------------------------------[版权申明: ...

随机推荐

  1. 3D拾取技术

    在unity3d中用户通过触摸屏选中虚拟3D世界中的物体进行操控,就须要掌握3d 拾取技术. 3d拾取技术很的简单:由摄像机与屏幕上的触控点之间确定一条射线.由此射线射向3d世界, 最先和此射线相交的 ...

  2. 三期_day02_数据库表设计和开发准备工作

    数据库脚本 drop table crm_user_info; drop table crm_work_customer_relation; drop table crm_business; drop ...

  3. 图像切割—基于图的图像切割(Graph-Based Image Segmentation)

     图像切割-基于图的图像切割(Graph-Based Image Segmentation) Reference: Efficient Graph-Based Image Segmentation ...

  4. d堆

    就是d叉堆,是二叉堆的简单推广(http://blog.csdn.net/buleriver/article/details/38469907) 对于一个d堆.也是能够使用数组表示.关键是怎样通过索引 ...

  5. 【Android UI】案例02 圆角边框、圆角背景的实现(shape)

    本文主要分享圆角边框与圆角背景的实现方式.该方式的实现,须要了解shape的使用.该部分的具体介绍,请阅读博客http://blog.csdn.net/mahoking/article/details ...

  6. [JZOJ3385] [NOIP2013模拟] 黑魔法师之门 解题报告(并查集)

    Description 经过了16个工作日的紧张忙碌,未来的人类终于收集到了足够的能源.然而在与Violet星球的战争中,由于Z副官的愚蠢,地球的领袖applepi被邪恶的黑魔法师Vani囚禁在了Vi ...

  7. TYVJ 1340 折半暴搜+二分

    思路: 1. 这 题 不卡常过不去啊-- (先加一个random_shuffle) 首先 我们可以折半 搜这一半可以到达的重量 sort一遍 然后搜另一半 对于路程中每一个解 我们可以二分前一半中加这 ...

  8. 查询目标的ip地址和详细地理信息(多种方法)

    不多说,直接上干货! 至于这里怎FQ,很简单,请见我下面的博客! kali 2.0安装 lantern(成功FQ) shadowsocks(简称SSFQ软件)步骤详解 FQ软件lantern-inst ...

  9. java 类和对象1

    编写一个Java应用程序,该程序中有3个类:Lader.Circle和主类A.具体要求如下:Lader类具有类型为double的上底.下底.高.面积属性,具有返回面积的功能,包括一个构造方法对上底.下 ...

  10. CUDA笔记(八)

    今天真正进入了攻坚期.不光是疲劳,主要是遇到的问题指数级上升,都是需要绕道的. 以visual profile来说,刚刚发现自己还没使用过. http://bbs.csdn.net/topics/39 ...