微信页面，实践总结

飞最近修改一个简单的微信页面，其中有不少新得，在此记录：

1.

设施背景透明时，保证背景上文字不透明：

如果设置：

background-color:#009900;

opacity: 0.5;

会使子元素——“文字”，一块透明

解决：设置为：background

:rgba(256,256,256,0.5);

2.背景图片小于屏幕又不想重复，一句话搞定（找了好一阵的）：

background-size:cover

3.一次加载多个页面，当前的显示，其余的隐藏：

<1>定义一个列表<ul class=“js_change”>

<2>js控制显示

$("js_change").children().eq(index).show().siblings().hide();

/*".js_change"类的第“index”个孩子元素显示，它的兄弟节点隐藏*/

4.给元素绑定事件：

元素：名为“.classname”的类

<1>$(document).on('click','.classname',function(){});

<2>$('.classname').on('click',function(){});

经查阅<1>是将事件委托到了document上；<2>是将每一个有“.classname”的类绑定事件，<1>更优。

5.如何处理移动端click有延迟的问题：

用fastclick——一个js库，用于消除UI上的点击延迟。

6.HTML5中<input>有个新属性placeholder的占位符属性，用它来处理输入框的预输入，但其中就有了个问题，我们无法通过增加类属性或通过其他选择器改变占位符的默认字体颜色和大小。

经查阅资料找到如下解决方式：在CSS文件中增加如下一段话：

input:-moz-placeholder { color: #999; }

::-webkit-input-placeholder { color:red }

它同样支持各类选择器，例如

/*改变类“.tabulation”类的子元素<li>中的textarea默认字体*/

.tabulation li textarea input:-moz-placeholder { color: #999; }

.tabulation li textarea::-webkit-input-placeholder { color:#999 }/*起决定作用*/

7.CSS控制显示图片的一部分：

格式（顺序可变）：

background:color url x值 y值 repeat；

例子：color为图片背景；URL为图片路径；x、y定位图片的位置，取值在第四象限，一般来说x为非负取值，y为非正取值；repeat，为图片重复

background: url(BG_2.png) no-repeat 0 -90px transparent

8.某些数字串在ios上会被识别为电话号码，从而影响设置的字体颜色等css样式。

主要是ios上Safari浏览器识别错误，防止ios上数字别识别为电话号码方法：

增加一个meta属性：

<meta name="format-detection" content="telephone=no" /> //"telephone"一定要为"no".

本文原载于飞的个人空间http://1.flyingdream.sinaapp.com/?p=27