改改名

作者： admin

  • 游弋完毕，回归正轨

    感谢这段时间的经过，行走在西红门和龙泽。
    带来了那么多朋友，加深了联系获得了不一样的感悟。
    如今回归龙泽，继续happy
    章程总是在搁浅，希望今天就开始拾起。

  • 等待一场雨

    等待一场雨，
    等了好久好久

    在闷热的室内祈求
    在树荫下谈论

    谈论一场雨的到来

    哗哗轰隆轰隆

    雨下来了，用雨伞迎接了它
    用空调迎接了夏天

    撑起防潮垫，眼望着群山淅沥低语

    喜欢群山环绕时席地而坐

    喜欢绿草茵茵中赤脚穿行

    就像在亲近，在交流，闲适，慵懒的风中，只我与它们在寂静中流淌。

    这段时间开始漂流。
    ————————————–

    不是贪图是困惑，
    不再困惑于别人，
    在寻求自我内心的念头，
    钻透年复一日积累的厚壳，
    勘测出儿时的蠢蠢欲动，
    释放真我。

    做一场旅行 游弋

  • 一下雨就犯困

    一下雨就喜欢睡觉，今天和室友们集体起晚了，起的最早的新室友有事情回家了，和琳琳飞奔到电梯，下来后还下着小雨。比往常晚出来了15分钟，起晚了半小时。
    我猜测，是不是人类的基因里面还有着远古的遗传，到了下雨天，就不是工作狩猎的日子了。就要好好的在洞穴里面补觉，补充体力。减少消耗，睡觉应该是最能减少消耗能量的了。
    近日，刚悠然眯起眼睛来，现实又给戳了一下。房东阿姨突然说她妹妹要搬家，她要把这个房子腾出来给其放东西！！！！昨天早上7就打电话了，唬了一跳。新室友非常纠结她已经搬了两次家了。她说以前的几个单位都是管住的，就今年这个不管住，就要折腾死人，还出这么一档子事儿。她家里还有事儿。真是屋漏连逢夜雨天。知道九月份要搬家或者续租，但是觉得还是久的事情了。当时都有种不知道该怎么办了，打算实在不行就去回归租床位。找个距离公司近的地方像是回到了2012。
    后面居然好转了，我真觉得自己的运气挺好的，机缘巧合就有同学来租房希望我能和一起租房，真是欣喜，感谢！
    ——
    美得书都是用一种外语写成。在每个词下面，我们每个人都加上自己的解释，这种解释往往是一种曲解，但是在美的书中，人们所作出的所有曲解都是美得——马塞尔·普鲁斯特

    看到的愈多愈不敢说话，感知的越深越不敢动弹，外面有那么多的未知，有那么丰富的色彩。恍若把微弱的自己湮没了，自己也止步于张着嘴睁大眼惊叹着这个世界的纷繁华丽多彩多姿。有的时候会憋不住了想去表达一下自己的想法，最后就想也许看看别人怎么办吧。于是就没有了然后。
    慢慢的自己的想法就没有了，怀念那时候自己有了想法就是拿着手机也要一点点记录下来。现在开始慢慢的复苏。哟吼吼吼吼吼吼吼

    下半年了 终于规整好了自己的状态~ ~ ~ happy~ step by step~
    如同被精琢的钻石，每个面都在太阳下，熠熠生光。
    —-
    但是，不是每一个人都可以做真是的自己，在那之前，先成为强大的那个自己吧。
    一个强大的自己，首先是拥有生存能力的人，只为了忠于自己，只为了忠于自己。
    1、关于选择
    2、关于专注
    3、关于视野

  • 时光

    在阳光温暖的春天
    走在这城市的人群中
    在不知不觉的一瞬间
    又想 起你……
    你是记忆中最美的春天
    是我难以再回去的昨天
    你像鲜花那样地绽放
    让我 心动……
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    在阳光温暖的春天
    走在这城市的人群中
    在不知不觉的一瞬间
    又想 起你……
    也许就在这一瞬间
    你的笑容依然如晚霞般
    在川流不息的时光中
    神采 飞扬……
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    ~~~music~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~
    We~~~say~~~~

  • 儿童节快乐~

    听着公司外面的广播体操，写儿童节快乐！
    儿童节快乐~ 五颜六色~ 表演节目~ 想当年幼儿园我还是被选中穿花裙子的跳舞的小女孩呢，因为抹的胭脂太过浅淡，参加比赛的时候。园长直接把指甲油抹上去两腮 – -！！！！！发统一的拜衬衣和丝绒裙，眉心点个红点什么的 – – 简直不忍直视。往下揪都疼！%>_<% 最近外在和内在一片混乱，昨天跟室友一块去菜市场买菜就说：“天哪，要愁死了。”面对问题总是习惯于逃避，觉得逃避了，问题就自己消亡了，就不存在了，可真是个不好的习惯啊。 喜欢那些数字一是一二是二，明确简单，是无趣也有趣。 我以为解决了一个痼疾之后，一片轻松，这舒坦日子刚没过多久，还没咂摸出味儿来，一大坨问题就呼啸而至，咣当一下，砸你面前，尘土飞扬！都蒙圈了。（室友说的蒙圈我觉得很有意思，画面感） 现今需要梳理梳理，总觉得最近太过闲适导致问题生发。多则惑，少则得，果实话也~ 时间太充裕啦~ 加油吧~一件一件的做，一件一件的解决吧。不是回归以前，而是探索新的解决方法，总是要这样的。 你的躲避，躲过了不幸，也躲掉了幸福。何惧风流 小时候，语文不好，但是语文老师还都是做班主任的，排位子都是语文老师排…… 有一次写你对爸爸讲的话，我当时写了一篇对爸爸的作文想说话，当时我老爸在哈尔滨，总是过年的时候才回来，买好多好吃的~ 口水，有那种健力宝铝灌装的饮料，大的可乐啊，双排火腿啊鸡翅~~等等 还有回到家去小卖铺买一袋子的碧绿色的西瓜花纹泡泡糖啊~扯远了 那个作文我真是真情实感啊，说不喜欢老爸随手一把的糖块，而是要多多陪陪我什么的。估摸着语文老师大为感动（他是个男的，也有小孩），记得中午吃过饭去学校上课，老师竟然单拿出来一节课说，看到上次写的作文有人写的非常好，要给大家读读什么的（之前没有过这种事），然后让第一排的同学找作文本，分成两摞，说是找我的作文…… 我囧且心虚，还有对于难得的语文老师赞赏的高兴懊恼…… 因为我自作聪明，这次刚交上的作文本里面并没有我的（因为我没写完，直接就故意放家里了…………） 然后没找到，我告诉老师说，我的作文忘到家了……，老师就说那就读读- -的周记吧。周记我记得很清楚写的叫《爱护地球》……当时刚学完什么地球是我们的母亲。我好后悔啊，后面我盼望着老师下次还能读作文，可是再没有一次读了…… 所以即便现在的没有问题没有解决，也不可以隐藏着丢开所有一切，要直面，因为很有可能你之前做的会得到赞赏啊……（一种装逼的感觉） 我现在还不适应直接在这里面写窸窸窣窣的生活，我就像一只多脚的蜈蚣，伸展着密密麻麻的脚，每次觉得情绪混乱就剁掉自己的一根脚……后果很可怕 ----------------------------------------有人要页面了--------------过会接着 我去，蜈蚣太瘆人了算了，不比喻了，总是回忆从前太不好玩了。 计划走起~ go~ 昨日歉意，让我做选择本是折磨。只会躲避摇头，不敢面对，总得来一下！ 加油~ step by step~ ~ 祝儿童节快乐~ 童心永存~面对大自然万事万物依然敬畏和好奇的探索之心~

  • 道别~

    我们长期以来的想法和感受，有一天将会被某个陌生人一语道破。-爱默生

    这是一只鸵鸟，谁都不要管它，等到沙子太热，它就把头抬起来了。

    就好似外表完好，里面有子弹的残核。你看着光滑无碍，只等待阴天暴雨隐隐作痛。而现在，这颗子弹被人挑出来了，扔到了手术盘叮当作响。

    “有时候你答应了，只是出于一种本能的反应”

    “就好像过去那么默默暗恋了很多年，觉得这个人无法抗拒”

    “但是其实你仔细审查一下你的内心，这种影响已经不复存在了”

    “需要改变的不是本性，而只是一种习惯而已”

    就好像冥冥注定的解脱，就好像套住的绳索被日月侵蚀，直到某日某人提醒，当头棒喝，醍醐灌顶，你早已长大，只是你还以为自己还是小象，到达今日的伸展双手，不再自缚，自由自在。

    我爱我自己就像爱我在乎的人一样。

    我爱护我的身体就像只有一件衣服的永恒。

    我爱护我的心灵就像城墙坚守，鲜花怒放。

    那种轻松来自于眯眼儿品尝和翘起的嘴角。

     

     

    原来就是这个折磨我了这么多年，你已忘记什么时候它进入了你的肌肤。

    对于这个事情，我有时重视无比，美好至极，有时厌恶自己，鞭挞自己 。

    在对于自己来说的说的伤口，用一层青春的漂亮玻璃纸盖上。恍若不知道下面有些什么，恍若认为是没有青春的，没有自卑的。来个自欺欺人的欲盖弥彰。

    终于被解决了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

    虽有怅然， 好去莫回头

  • MAS接口常遇问题

    1、运行地址（格式）如图
    http://127.0.0.1:9090/xxx/xxx/default/rrrff

    QQ图片20151106173138

    2、MAS结构
    文件元素的查找范围 Robot
    Robot,function(des){
    //add your web html pretreatment code to decrease DOM parsing time.
    var s=des.indexOf(‘<div class=”view_ti”>’);
    var e=des.indexOf(‘<div style=” clear:both; height:10px;”>’);
    //substring 范围界定
    return des.substring(s,e);
    //return des;
    }

    3、取到中间字段篇幅
    function list(tTit){
    var text = “<font color=gray>”;
    var endText = “</font>”;
    var ss= tTit.indexOf(text);
    var ee=tTit.indexOf(endText);
    return tTit.substring(ss+text.length,ee);
    }
    tit.push(list(tTit)); //push的是运行完的结果

    4、列表页和详情页结合轮播图代码汇总
    思路：先调取列表，在详情页面解决图片地址。利用索引值id调取背景图片。
    var namearr = [];
    var imgArr = [];
    function newsCarousel(){
    $toast(‘数据加载中…’);
    $.getJSON(‘http://127.0.0.1:8087/xxx/xxx/default/list’, function(data){
    //新闻图片轮播
    if (data.status == ‘0’ && data.data && data.data.length) {
    $closeToast();
    var dataLen = data.data;
    var tmpl = ‘<div class=”ub-fh” ontouchstart=”zy_touch(\’\’)” onclick=”openNewWin(\’news_articlecommon\’,\’news_articlecommon.html\’);”>’
    +'<div id=”img_${index:}” class=”ub ub-f1 ub-imgnews newsban ub-ae uh-for1 ${cb:name}” style=”background-image:url(http://www.sinosure.com.cn/sinosure/xwzx/xbdt/images/20140829/32045.jpg);”></div>’
    +'</div>’;
    var s = zy_tmpl(tmpl, dataLen, zy_tmpl_count(dataLen), function(a, b){
    namearr.push(a.name);
    $closeToast();
    });
    $$(‘slider’).innerHTML = s;
    //显示小点
    var str = ”;
    for (var i = 0; i < dataLen.length; i++) {

    if (i == 0) {
    str += ‘<div id=”num’ + i + ‘” class=”uc-a-for1 uwh-for1 c-wh3 umar-r-for”></div>’;
    }
    else {
    str += ‘<div id=”num’ + i + ‘” class=”uc-a-for1 uwh-for1 c-gra-for2 umar-r-for”></div>’;
    }
    }
    $$(‘proint’).innerHTML = str;

    //滑动时当前图片的小点颜色为蓝色
    var slider = new zySlide(“slider”, “H”, function(){
    var cur = slider.currentPoint;
    var length = slider.maxPoint;
    for (var n = 0; n <= length; n++) {
    if (n == cur) {
    $$(“num” + n).className = ‘uc-a-for1 uwh-for1 c-wh3 umar-r-for’;
    }
    else {
    $$(“num” + n).className = ‘uc-a-for1 uwh-for1 c-gra-for2 umar-r-for’;
    }
    }
    $$(‘title’).innerHTML = namearr[cur];
    }, false, function(e){});

    for(var j=0;j<5;j++){
    var url = dataLen[j].href;
    $.getJSON(‘http://127.0.0.1:8087/xxx/xxx/default/fff?index=’+j+’&url=’+url, function(data1){
    $$(‘img_’+data1.index).style.backgroundImage = ‘url(‘+data1.data[0].src+’)’;
    $$(‘title’).innerHTML=data1.title;
    });
    }
    }
    });
    }
    Mas接口 info
    var MEAP = require(“meap”);

    function run(Param, Robot, Request, Response, IF){
    LOG(“Param.params.index”,Param.params.index);
    var option={
    method : “GET”,
    url: Param.params.url,
    index:Param.params.index,
    Cookie : “true”,
    Charset:”gb2312″
    };

    MEAP.AJAX.Runner(option,function(err,res,data){
    if(!err)
    {
    //Add your normal handling code
    MEAP.PARSER.Runner(“HTML”,res.text, function(err,DOM){
    if(!err && DOM){
    var arr=[];
    var t=DOM.getElementsByTagName(‘div’);
    var tit =t.length;
    var tit=t[0].innerHTML;
    // var con=t[1].text();
    // var tit =t[0].innerHTML;
    var con =t[1].innerHTML;

    var timg=DOM.getElementsByTagName(‘IMG’);

    for( var i=0;i<timg.length;i++){
    var url =”http://www.sinosure.com.cn”+timg[i].src;
    if(timg==”||timg==undefined){
    //url=”http://www.sinosure.com.cn/sinosure/xwzx/xbdt/images/20140827/32026.jpg”;
    break;
    }
    var src = url.replace(“file:///D:/”,”/”);
    arr.push(src);
    }

    //Add your DOM handling code

    var answerStr = JSON.stringify(
    {
    status: 0,
    title: tit,
    content: con,
    index:Param.params.index,
    data: arr
    });
    var o = JSON.parse( answerStr);
    Response.end(JSON.stringify(o));
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”

    }));
    }
    });
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”
    }));
    }

    },Robot,function(des){
    var s=des.indexOf(‘<div class=”view_ti”>’);
    var e=des.indexOf(‘<div style=” clear:both; height:10px;”>’);
    return des.substring(s,e);
    });
    }

    exports.Runner = run;
    Mas接口 list
    var MEAP = require(“meap”);

    function run(Param, Robot, Request, Response, IF){

    var option={
    method : “GET”,
    url: “http://www.sinosure.com.cn/sinosure/xwzx/xbdt/default.html”, //列表页抓取页面
    Cookie : “true”,
    Charset:”gb2312″
    };

    MEAP.AJAX.Runner(option,function(err,res,data){
    if(!err)
    {
    //Add your normal handling code
    MEAP.PARSER.Runner(“HTML”,res.text, function(err,DOM){
    if(!err && DOM){
    var arr=[];
    //var tit=[];
    var oLi=DOM.getElementsByTagName(‘a’);
    function list(tTit){
    var text = “<font color=gray>”;
    var endText = “</font>”;
    var ss= tTit.indexOf(text);
    var ee=tTit.indexOf(endText);
    return tTit.substring(ss+text.length,ee);
    }
    for(var i=21;i<26;i++){
    var obj={};
    obj.title=list(oLi[i].innerHTML);
    obj.href=”http://www.sinosure.com.cn”+oLi[i].attributes[‘href’].value;
    arr.push(obj);
    }
    var answerStr = JSON.stringify(
    {
    status: 0,
    //title:tit,
    data: arr
    });
    var o = JSON.parse( answerStr);
    // eval(“var answerStr = ‘”+JSON.stringify(o)+”‘;”);
    Response.end(JSON.stringify(o));
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”

    }));
    }
    });
    }
    else {
    Response.end(JSON.stringify({
    status: 1,
    msg: “异常”
    }));
    }

    },Robot,function(des){
    //add your web html pretreatment code to decrease DOM parsing time.
    var s=des.indexOf(‘<div class=”news_gray_k”>’);
    var e=des.indexOf(‘<div class=”gradual”>’);
    //var img=des.indexOf(‘<img’);
    //substring 范围界定
    return des.substring(s,e);
    //return des;
    });
    }

    exports.Runner = run;

  • 导航条hover时，用css解决中英文互换

    导航条默认为“英文”显示，鼠标hover的时候变为“中文”显示。如下图所示

    利用display的block和none进行切换显示

    1

    2

     

     

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title>无标题文档</title>

    <style type=”text/css”>

    *{ margin:0;padding:0}

    ul,li{ list-style:none}

    a{text-decoration:none}

    em{ font-style:normal;}

    .box{ width:1000px; margin:30px auto; height:50px; background:#000; border-bottom:4px solid #f00;}

    .nav{ height:50px;line-height:50px; margin-left:30px;}

    .nav li{ width:100px; float:left; text-align:center;text-algin:center;}

    .nav li a{ color:#fff; display:block;}

    .nav li a span{ display:none}

    .nav li a:hover{ background:#f00;}

    .nav li a:hover span{display:block;}

    .nav li a:hover em{display:none;}

    </style>

    </head>

     

    <body>

    <div class=”box”>

    <ul class=”nav”>

    <li><a href=”#”><span>首页</span><em>index</em></a></li>

    <li><a href=”#”><span>产品</span><em>product</em></a></li>

    <li><a href=”#”><span>联系我们</span><em>contact</em></a></li>

    <li><a href=”#”><span>关于我们</span><em>about</em></a></li>

    <li><a href=”#”><span>新闻资讯</span><em>news</em></a></li>

    <li><a href=”#”><span>网站地图</span><em>site</em></a></li>

    </ul>

    </div>

    </body>

    </html>

     

  • 百度空间关闭咯

    百度空间要关闭咯，关闭咯。最近喜欢了说“咯”这个字，感觉把它坠在句尾，既表现的自己对什么事情不确定是疑问，是感叹，是隐秘的知道别人不知道的小神奇。好像差不多大概也许左右。

    是什么时候，开始喜欢的呢？

    鼓着眼睛说，我不知道咯。~

    空间关闭就要搬家，搬家真的像搬家，搬了空间换了模板，你这个空间的好友是否还在？ 是否直接不再写。坚持一样点滴的事情难又易。难的是天天要坚持，易的是仅仅些许的文字点滴，不费心，不费大把的时间。

    昨天突然跟个网友尘聊天，说看到我那么多文字，我左右翻了存档，暗自得意其实我还有好多设置的只准自己看的呢。翻阅翻阅，喜不自禁。写了好多篇不错哟~

    又及看到以前09年关注的一个大学学长的新浪博客，发现他早就搬家了。自建了自己的博客。里面全是关于游戏开发和只言片语的随笔。不过到了去年12月份就没有在更新，就觉得可惜。是不是也像我去年进行了封闭开发了若干月。不过看浏览文章的记录也许就是一般三五人。不过这三五人也会猜测怎么还不更新呢。

    写东西都是取悦自己和发泄自己。若得意外赞许，也是十分欢喜。

    以后我的绀珠集标签都会没有了。

    特贴空间写的 面对百度写的东西

    谢谢啊，百度空间您终于把自己给搞死了

    图片

    谢谢啊 百度空间您终于把自己给搞死了，报了我的十五级绿豆蛙之仇！绿豆蛙小天使你走的可以欣慰了

    玩死空间，一步一步的 step by step图片图片

    从我空间养的宠物绿豆蛙突然被灭掉弄消失，连个提示都没有！！

    后来，玩的开心农场阳光牧场，突然关闭。弹个理由也没有给，直接断掉接口！！

    再后来，强制必须要升级，搞了个什么轻博客，学人家网易和点点，导致大批人走，还要求自己手动导出数据传出数据，不能自定义模板用自己的图片，一批图片摄影空间全部溃散。自己的主页面，点击就是死链接，no find，我勒个去~~~

    再再后来，批量博客导出，同步分享微博 人人网功能接口也关闭掉了，就开始没兴趣了。

    最后找进入百度空间的接口都找不见了，得进入第五级页面才能找到空间。。。。。我还是在执着的找入口。。。

    http://hi.baidu.com/constraint19  我的6年记忆~~~

    ok，现在终于提到自己玩死了空间。 图片

     

     

    国民性=过敏性 嘿嘿

     

  • flex弹性盒子

    概述

    UI3.0使用弹性盒子对页面进行布局，ui-box.css中就定义了弹性盒子的一些css3样式，弹性盒子模型是在指定大小的父容器里来为子元素分配空间，使用box架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机

    CSS Variables

    Box架构

    定义：
    ub……
    说明：
    使用box弹性盒子模式对页面进行布局
    例子：
    ub定义元素的display属性为box。那么子元素就可以根据我们定义的比例来分配元素的空间，ub一般跟ub-f[1-4]搭配着使用

    Box架构元素空间大小分配比例

    定义：
    ub-f……
    说明：
    定义不同的box-flex属性值
    类别使用数字编号，定义不同的元素空间大小分配比例
    例子：

    ub-f1数字编号为1；定义box-flex：1
    ub-f1数字编号为2；定义box-flex：2
    ub-f1数字编号为3；定义box-flex：3
    ub-f1数字编号为4；定义box-flex：4
    ub-f[1-4]和ub搭配着使用

    解析：
    1、若子元素都使用ub-f1，那么子元素等比例的分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    2、若子元素一个用ub-f1，另外一个用ub-f2.，那么子元素按照1：2的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. </div>


    3、若子元素分别使用ub-f1，ub-f2，ub-f3，那么子元素会按照1：2：3的比例分配父元素的空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='ub-f1 sc-bg-alert'></div>
    3. <div class='ub-f2 bc-head'></div>
    4. <div class='ub-f3 sc-bg-active'></div>
    5. </div>


    4、若子元素中只有一个使用ub-f1，另外一个元素根据内容的多少定义大小，那么使用ub-f1的元素会自动适配元素的剩余空间大小

    1. <div class='ub c-gra uba b-bla umh5'>
    2. <div class='sc-bg-alert'>内容</div>
    3. <div class='ub-f1 bc-head'></div>
    4. </div>

    ub-f[1-4]和ub搭配着使用
    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis umh4'>
    3. <div class='ub-f1 ut-s'>设置</div>
    4. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    5. <div class='res8 lis-sw ub-img'></div>
    6. </div>
    7. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis umh4'>
    8. <div class='ub-f1 ut-s'>设置</div>
    9. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    10. <div class='res8 lis-sw ub-img'></div>
    11. </div>
    12. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis umh4'>
    13. <div class='ub-f1 ut-s'>设置</div>
    14. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    15. <div class='res8 lis-sw ub-img'></div>
    16. </div>
    17. </div>

    图例：

    Box架构元素垂直方向的位置排列

    定义：
    ub-ac，ub-ae……
    说明：

    ub-ac：垂直居中
    ub-ae：位于底边
    只有跟ub搭配着使用ub-ac，ub-ae的作用才生效

    例子：
    1、未使用ub-ac，ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    2、使用ub-ac

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ac'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    3、使用ub-ae

    1. <div class='ub uinn umh4 uba b-gra uc-a ub-ae'>
    2. <div class='ub-f1'>内容</div>
    3. <div class='res8 lis-sw ub-img'></div>
    4. </div>


    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'>></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-grat-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例：

    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

    1. <div class='uinn2 c-gra ub'> <div class='umh5 umw3 sc-bg-alert'></div>
    2. <div class='umh5 umw3 bc-head'></div>
    3. <div class='umh5 umw3 sc-bg-active'></div>
    4. </div>

    2、使用ub-pc

    1. <div class='uinn2 c-gra ub-pc ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    3、使用ub-pe

    1. <div class='uinn2 c-gra ub-pe ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    4、使用ub-pj

    1. <div class='uinn2 c-gra ub-pj ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素垂直排列

    定义：
    ub-ver….
    说明：
    ub-ver：定义元素垂直排列
    只有跟ub搭配着使用ub-ver的作用才生效
    例子：
    1、未使用ub-ver

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>


    2、使用ub-ver

    1. <div class='uinn2 c-gra ub ub-ver uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    Box架构元素排列方向

    定义：
    ub-rev……
    说明：
    ub-rev：定义元素排列方向
    只有跟ub搭配着使用ub-rev的作用才生效
    例子：
    1、未使用ub-rev

    1. <div class='uinn2 c-gra ub uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </div>

    2、使用ub-rev

    1. <div class='uinn2 c-gra ub ub-rev uba b-bla'>
    2. <div class='umh5 umw3 sc-bg-alert'></div>
    3. <div class='umh5 umw3 bc-head'></div>
    4. <div class='umh5 umw3 sc-bg-active'></div>
    5. </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，定义背景图像居中显示

    场景：

    1. <div class='uba b-gra c-wh us uc-a '>
    2. <div ontouchstart='zy_touch('btn-act')' class='uc-t ubb ub b-gra t-bla ub-ac lis'>
    3. <div class='lis-icon ub-img im'></div>
    4. <div class='ub-f1 ut-s'>设置</div>
    5. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    6. <div class='res8 lis-sw ub-img'></div>
    7. </div>
    8. <div ontouchstart='zy_touch('btn-act')' class=' ub ubb b-gra t-bla ub-ac lis'>
    9. <div class='lis-icon ub-img im'></div>
    10. <div class='ub-f1 ut-s'>设置</div>
    11. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    12. <div class='res8 lis-sw ub-img'></div>
    13. </div>
    14. <div ontouchstart='zy_touch('btn-act')' class='uc-b ub t-bla ub-ac lis'>
    15. <div class='lis-icon ub-img im'></div>
    16. <div class='ub-f1 ut-s'>设置</div>
    17. <div class='tx-r t-blu ulev-1'>Old Phone</div>
    18. <div class='res8 lis-sw ub-img'></div>
    19. </div>
    20. </div>

    图例：

    根本的就是

    <div style="width:300px; display:-webkit-box; display:box;">
<div style="-webkit-box-flex:1.0; border:1px solid #f00;">12</div>
<div style="-webkit-box-flex:2.0; border:1px solid #000;">12</div>
</div>

<div style="width:600px; display:-webkit-box;display:box;">
<div style="-webkit-box-flex:1; border:1px solid #f00"></div>
<div style="-webkit-box-flex:2; background:#ff0"></div>
</div>