月度归档： 2015 年 4 月

百度空间关闭咯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

国民性=过敏性嘿嘿

2015年4月23日
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>
```
2015年4月3日