刚看到一款韩文的消除类游戏,游戏模式是通过消除来和对手进行pk，双方都有血条。并且对手也有一个缩写的游戏窗口看到其游戏界面。
游戏效果图如下:

1.wordpress重新安装后，在数据库wp_options里的“siteurl”和“home”字段需要设置成新的网站域名.
2.使用sql更新wp_options:
UPDATE wp_options SET option_value = REPLACE(option_value,’旧地址’,’新地址’);
UPDATE wp_posts SET post_content = replace(post_content,’旧地址’,’新地址’);
UPDATE wp_posts SET post_excerpt= replace(post_excerpt,’旧地址’,’新地址’);
UPDATE wp_posts SET guid= replace(guid, ‘旧地址’,’新地址’);
3.之前安装的插件和主题，重新上传到对应文件夹即可

玩的么主站今日刚刚发布了一款html5小游戏 美女爱消除，该游戏可以在pc端，手机端和pad端在线玩，游戏地址: http://wande.me/mm

游戏截图如下:

在网页里面添加3d效果展示，需要在包裹内容的div wrap上加入perspective 透视属性,其子元素.cube要设置transform-style: preserve-3d;属性来进行3d显示,.cube 的子div需要设置transform的translate和rotate值来进行xyz轴的移动和旋转，以实现3d展示效果.

[caption id=”attachment_356” align=”alignnone” width=”394”] css3 3d图形[/caption]

示例地址: http://www.webdevelopmentmachine.com/rain-css/css3/cube.html

css:

@-webkit-keyframes spin {from {-webkit-transform: rotateY(0)}to {-webkit-transform: rotateY(360deg)}}
@-ms-keyframes spin {from {ms-transform: rotateY(0)}to {ms-transform: rotateY(360deg)}}
@keyframes spin {from {transform: rotateY(0)}to {transform: rotateY(360deg)}}
@-webkit-keyframes spin-vertical {from {-webkit-transform: rotateX(0)}to {-webkit-transform: rotateX(-360deg)}}
@-ms-keyframes spin-vertical {from {ms-transform: rotateX(0)}to {ms-transform: rotateX(-360deg)}}
@keyframes spin-vertical {from {transform: rotateX(0)}to {transform: rotateX(-360deg)}}
.wrap {
-webkit-perspective: 400px;
-webkit-perspective-origin: 50% -150px;
-moz-perspective: 400px;
-moz-perspective-origin: 50% -150px;
-ms-perspective: 400px;
-ms-perspective-origin: 50% -150px;
perspective: 400px;
perspective-origin: 50% -150px;
}

.cube {
position: relative;
width: 100px;
height:200px;
margin: 20px auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}

.cube div {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
font-size: 20px;
text-align: center;
line-height: 100px;
font-family: sans-serif;
text-transform: uppercase;
}

.cube .back{
-webkit-transform: translateZ(-50px) rotateY(180deg);
-moz-transform: translateZ(-50px) rotateY(180deg);
-ms-transform: translateZ(-50px) rotateY(180deg);
transform: translateZ(-50px) rotateY(180deg)
}

.cube .right {
-webkit-transform: rotateY(-270deg) translateX(50px);
-webkit-transform-origin: right center;
-moz-transform: rotateY(-270deg) translateX(50px);
-moz-transform-origin: right center;
-ms-transform: rotateY(-270deg) translateX(50px);
-ms-transform-origin: right center;
transform: rotateY(-270deg) translateX(50px);
transform-origin: right center;
}

.cube .left {
-webkit-transform: rotateY(270deg) translateX(-50px);
-webkit-transform-origin: center left;
-moz-transform: rotateY(270deg) translateX(-50px);
-moz-transform-origin: center left;
-ms-transform: rotateY(270deg) translateX(-50px);
-ms-transform-origin: center left;
transform: rotateY(270deg) translateX(-50px);
transform-origin: center left
}

.cube .top {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-webkit-transform-origin: center center;
-moz-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform-origin: center center;
-ms-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform-origin: center center;
transform: rotateX(-90deg) translateZ(-50px);
transform-origin: center center;
}

.cube .bottom {
-webkit-transform: rotateX(90deg) translateZ(-50px);
-webkit-transform-origin: center center;
-moz-transform: rotateX(90deg) translateZ(-50px);
-moz-transform-origin: center center;
-ms-transform: rotateX(90deg) translateZ(-50px);
-ms-transform-origin: center center;
transform: rotateX(90deg) translateZ(-50px);
transform-origin: center center;
}

.cube .front{
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
transform: translateZ(50px)
}
.wrap.flat {
-webkit-perspective: none;
-webkit-perspective-origin: 0 0;
-moz-perspective: none;
-moz-perspective-origin: 0 0;
-ms-perspective: none;
-ms-perspective-origin: 0 0;
perspective: none;
perspective-origin: 0 0
}

html:

<div>
<div>
<div>前</div>
<div>后</div>
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
</div>
</div>
</div>

在ios下检测页面是否滚动到底部会出现页面底部判断不准确的问题,这个时候需要在页面头部加入viewpor的meta:height=device-height <meta name=’viewport’ content=’height=device-height,width=device-width,initial-scale=1.0’/>

然后加入检测代码:

$(window).scroll(function(){

//这里的o.lastItemHandle用于选中最后一行记录，即页面滚动到下面，最后一条记录可见
if ($(o.lastItemHandle).is(‘:visible’)){
if(win.scrollTop() + win.height() >= $(document).height()){}
}
});

在安卓端页面如果给一个div使用overflow:auto,并设定一个固定高度，里面可以滚动的内容会发生事件穿透，点击其他区域，都会触发点击div里面的内容.
rain css的select控件在弹出的选择列表里面的列表会在点击ok，cancel的时候被点击到，如图:
[caption id=”attachment_335” align=”alignnone” width=”480”] Rain css select组件[/caption]

解决这个问题的方法是在按钮的外层div上加入一个不可见的div来挡住事件的穿透:
css:
.touchWrap{margin:0;padding:0;border:none;background:rgba(255,255,255,0.01); -webkit-tap-highlight-color:rgba(0,0,0,0);top:0px;left:0px;z-index:-1;}

js:
buttonsWrap.append('<div class="touchWrap posa fullw fullh"></div>');

下载并安装nodejs环境，使用npm命令npm -g install weinre 直接安装weinre.其中npm安装的位置在C:\Users\RainZhai\AppData\Roaming\npm\node_modules.
安装完成后，使用weinre命令开启本地服务:

$ weinre –help
usage:   weinre [options]
version: 2.0.0-pre-HA5N9T49

options:
–httpPort port to run the http server on default: 8080
–boundHost ip address to bind the server to default: localhost
–verbose print more diagnostics default: false
–debug print even more diagnostics default: false
–readTimeout seconds to wait for a client message default: 5
–deathTimeout seconds to wait to kill client default: 3*readTimeout

–boundHost can be an ip address, hostname, or -all-, where -all-
means binding to all ip address on the current machine’

for more info see: http://people.apache.org/~pmuellr/weinre/
局域网这里的ip写成自己的ip:weinre –boundHost 192.168.1.102
服务开启后可以通过本地访问http://192.168.1.102:8080/

[caption id=”attachment_328” align=”alignnone” width=”714”] weinre调试工具[/caption]

[caption id=”attachment_329” align=”alignnone” width=”557”] weinre 调试页面[/caption]

http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

Padding 指的是内容和内容边距之间的空间
Border指的是在方框每一边上的直线
Margin指的是一个标签和另一个标签间的间隔
[caption id=”attachment_323” align=”alignnone” width=”355”] Margin、Padding and Border[/caption]

Margin 和 padding的快捷设定

margin:0 5px 5px 5px ;
padding: 5px 5px 5px 5px;其顺序是：top right bottom left 等同于padding：5px;
若css属性上值为0；则可以简写,如 margin:0；
Margin：0 2em；指的是top和bottom为0；left和right为2em；

Border 属性

border:2px solid black;
也可以对单个边进行设定：border-bottom:2px solid black;

实例如下：ex4_box.html->ex4_box2.html
[caption id=”attachment_324” align=”alignnone” width=”722”] ex4_box.html->ex4_box2.html[/caption]

用over-flow属性控制溢出文本

Over-flow有4个属性
visible: 可见的
scroll: 添加滚动条
auto: 自动处理,需要的时候添加滚动条
hidden: 隐藏超出边框的内容

a：link 未使用的链接（a）
a：visted 已经点击过的链接
a：hover 鼠标滑过时改变链接的效果
a：active 点击时展示链接效果

实例如下：ex3_pseudo.html
[caption id=”attachment_320” align=”alignnone” width=”355”] 伪类和伪元素[/caption]

[caption id=”attachment_314” align=”alignnone” width=”592”] HTML族谱[/caption]

关键词：祖先，派生，父标签，子标签，同胞标签

祖先：一个标签A包含了另一个标签B，那么A是B的祖先，html标签是所有标签的祖先。
派生：在一个或是更多标签内部的标签就是一个派生标签，图中body是html派生标签。
父标签：一个父标签是另一个标签最近的祖先，html是head和body标签的父标签。
子标签：一个直接被另一个标签包围的标签就是子标签,h1和p是body的子标签。

同胞标签：如图中的head和body，还有h1和p。

创建派生选择器（Desendent Selecter）
假设你想将样式应用给p标签中带有strong标签的那个单词，也就是上图中的单词important。
p strong{ color : red;}
如下ex2_FamilyTree_1.html

[caption id=”attachment_315” align=”alignnone” width=”413”] ex2_FamilyTree_1.html[/caption]