微信頁面,實踐總結

飛最近修改一個簡單的微信頁面,其中有不少新得,在此記錄:

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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章