一、select 用遮蓋層去默認倒三角的時候，可以改改select的size，讓select顯示選擇下拉框。
//select
$(".info-sel").click(function(){
$("#select").attr('size',2);
$("option").click(function(){
$("#select").removeAttr('size');
})
});
也可以用css解決，在遮蓋層的css屬性里添加：
pointer-events:none;
只用于頁面單個需求。
二、textarea多文本輸入框，去除右下角可以拖著放大的符號：
textarea{outline:none;resize:none};
三、文字溢出隱藏，出現省略號
控制文字以行數顯示。
word-break: break-all;
text-overflow: ellipsis; /*出現省略號*/
display: -webkit-box; /* 對象作為伸縮盒子模型顯示 */
-webkit-box-orient: vertical; /* 設置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 顯示的行數 */
overflow: hidden; /* 隱藏超出的內容 */
四、 利于css3,偽類和選擇器，實現簡單的點擊，選擇效果。
改變input的默認樣式，實現選擇的效果。
<label class="input-checked" for="small">
<input type="checkbox" id="small">
<i></i>
點贊
</label>
<style>
.input-checked>input{display:none;}
.input-checked>input + i{display:inline-block;width:20px;height:20px;background:#ccc;}
.input-checked>input:checked + i{background:pink;}
</style>
五、偽元素after和before+border實現頁面icon。
- 5.01 實現三角形 border技巧
border-style:solid; /* 為實線 */
border-width:8px 8px 12px 8px; /* 底部邊框拉伸，改變三角形角度大小*/
border-color: transparent transparent #fff transparent; /* 只在顯示是邊框設置顏色，其他為透明*/
-webkit-transform: rotate(450deg);transform: rotate(450deg); /* 按需求旋轉角度*/
- 5.02 實現前進后退箭頭 border技巧
.go-back::before {
content: "";
position: absolute;
top: 8px;
left: 7px;
width: 12px;
height: 12px;
border: 2px solid #fff;
border-width: 2px 0 0 2px; /* 只讓相鄰的兩條邊框顯示*/
-webkit-transform: rotate(315deg);/* 通過旋轉的角度，使箭頭向左或向右*/
transform: rotate(315deg);
}
- 5.03 實現盒子突出的尖角
.sharp{
z-index: 2;
position:absolute;
right:-20px;
top:20px;
border-style:solid;
border-color:transparent transparent transparent #fff;
border-width:10px;
}
.sharp:after{
content:" ";
position:absolute;
top:-8px;
left:-10px;
border-style:solid;
border-color:transparent transparent transparent blue;
border-width:8px;
}
六、 Meta標簽中的format-detection屬性及含義
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html里的一些格式的，那關于meta的format-detection屬性主要是有以下幾個設置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具體說下每個設置的作用：
1、telephone
你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：
telephone=no就禁止了把數字轉化為撥號鏈接！
telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！
1、email
告訴設備不識別郵箱，點擊之后不自動發送
email=no禁止作為郵箱地址！
email=yes就開啟了把文字默認為郵箱地址，這個meta就不用寫了,在默認是情況下就是開啟！
3、adress
adress=no禁止跳轉至地圖！
adress=yes就開啟了點擊地址直接跳轉至地圖的功能,在默認是情況下就是開啟！
七、蘋果頭部狀態欄
1. apple-mobile-web-app-capable屬性及含義
這meta的作用就是刪除默認的蘋果工具欄和菜單欄。
content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
2. apple-mobile-web-app-status-bar-style屬性及含義
“apple-mobile-web-app-status-bar-style”作用是控制狀態欄顯示樣式
status-bar-style:black ：黑色；
status-bar-style:black-translucent ：透明黑；
八、Viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
這段代碼的意思是:
讓viewport的寬度等于物理設備上的真實分辨率，不允許用戶縮放。
一都主流的web app都是這么設置的，它的作用其實是故意舍棄viewport，
不縮放頁面，這樣dpi肯定和設備上的真實分辨率是一樣的，不做任何縮放，網頁會因此顯 得更高細膩。
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放
九、背景漸變，盒子陰影，文字描邊
/* 背景漸變 */
background: -moz-linear-gradient(left top, #22d8ff, #2298ff);
background: -webkit-linear-gradient(left top, #22d8ff, #2298ff);
background: -o-linear-gradient(left top, #22d8ff, #2298ff);
/* 盒子陰影 */
-webkit-box-shadow: 0 5px 10px rgba(1,1,1,0,1);
-moz-box-shadow: 0 5px 10px rgba(1,1,1,0,1);
box-shadow: 0 5px 10px rgba(1,1,1,0,1);
/* 文字描邊 */
text-shadow:1px 0px 0px #885437,-1px 0px 0px #885437,0px 1px 0px #885437,0px -1px 0px #885437;
-webkit-text-shadow:1px 0px 0px #885437,-1px 0px 0px #885437,0px 1px 0px #885437,0px -1px 0px #885437;
