一薇宠、select 用遮蓋層去默認(rèn)倒三角的時(shí)候，可以改改select的size艰额，讓select顯示選擇下拉框澄港。
//select
$(".info-sel").click(function(){
$("#select").attr('size',2);
$("option").click(function(){
$("#select").removeAttr('size');
})
});
也可以用css解決，在遮蓋層的css屬性里添加：
pointer-events:none;
只用于頁面單個(gè)需求柄沮。
二回梧、textarea多文本輸入框，去除右下角可以拖著放大的符號(hào)：
textarea{outline:none;resize:none};
三祖搓、文字溢出隱藏漂辐，出現(xiàn)省略號(hào)
控制文字以行數(shù)顯示。
word-break: break-all;
text-overflow: ellipsis; /*出現(xiàn)省略號(hào)*/
display: -webkit-box; /* 對象作為伸縮盒子模型顯示 */
-webkit-box-orient: vertical; /* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 顯示的行數(shù) */
overflow: hidden; /* 隱藏超出的內(nèi)容 */
四棕硫、 利于css3,偽類和選擇器髓涯，實(shí)現(xiàn)簡單的點(diǎn)擊，選擇效果哈扮。
改變input的默認(rèn)樣式纬纪，實(shí)現(xiàn)選擇的效果。
<label class="input-checked" for="small">
<input type="checkbox" id="small">
<i></i>
點(diǎn)贊
</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實(shí)現(xiàn)頁面icon包各。
- 5.01 實(shí)現(xiàn)三角形 border技巧
border-style:solid; /* 為實(shí)線 */
border-width:8px 8px 12px 8px; /* 底部邊框拉伸，改變?nèi)切谓嵌却笮?/
border-color: transparent transparent #fff transparent; /* 只在顯示是邊框設(shè)置顏色靶庙，其他為透明*/
-webkit-transform: rotate(450deg);transform: rotate(450deg); /* 按需求旋轉(zhuǎn)角度*/
- 5.02 實(shí)現(xiàn)前進(jìn)后退箭頭 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);/* 通過旋轉(zhuǎn)的角度问畅，使箭頭向左或向右*/
transform: rotate(315deg);
}
- 5.03 實(shí)現(xiàn)盒子突出的尖角
.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標(biāo)簽中的format-detection屬性及含義
format-detection翻譯成中文的意思是“格式檢測”，顧名思義护姆，它是用來檢測html里的一些格式的矾端，那關(guān)于meta的format-detection屬性主要是有以下幾個(gè)設(shè)置：
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"
下面具體說下每個(gè)設(shè)置的作用：
1、telephone
你明明寫的一串?dāng)?shù)字沒加鏈接樣式卵皂，而iPhone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式秩铆、并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)！想去掉這個(gè)撥號(hào)鏈接該如何操作呢灯变？這時(shí)我們的meta又該大顯神通了殴玛，代碼如下：
telephone=no就禁止了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接！
telephone=yes就開啟了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接添祸，要開啟轉(zhuǎn)化功能滚粟，這個(gè)meta就不用寫了,在默認(rèn)是情況下就是開啟！
1刃泌、email
告訴設(shè)備不識(shí)別郵箱凡壤，點(diǎn)擊之后不自動(dòng)發(fā)送
email=no禁止作為郵箱地址！
email=yes就開啟了把文字默認(rèn)為郵箱地址蔬咬，這個(gè)meta就不用寫了,在默認(rèn)是情況下就是開啟！
3沐寺、adress
adress=no禁止跳轉(zhuǎn)至地圖林艘！
adress=yes就開啟了點(diǎn)擊地址直接跳轉(zhuǎn)至地圖的功能,在默認(rèn)是情況下就是開啟！
七混坞、蘋果頭部狀態(tài)欄
1. apple-mobile-web-app-capable屬性及含義
這meta的作用就是刪除默認(rèn)的蘋果工具欄和菜單欄狐援。
content有兩個(gè)值”yes”和”no”,當(dāng)我們需要顯示工具欄和菜單欄時(shí)，這個(gè)行meta就不用加了究孕，默認(rèn)就是顯示啥酱。
2. apple-mobile-web-app-status-bar-style屬性及含義
“apple-mobile-web-app-status-bar-style”作用是控制狀態(tài)欄顯示樣式
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的寬度等于物理設(shè)備上的真實(shí)分辨率，不允許用戶縮放微酬。
一都主流的web app都是這么設(shè)置的绘趋，它的作用其實(shí)是故意舍棄viewport，
不縮放頁面颗管，這樣dpi肯定和設(shè)備上的真實(shí)分辨率是一樣的陷遮，不做任何縮放，網(wǎng)頁會(huì)因此顯 得更高細(xì)膩垦江。
width：控制 viewport 的大小帽馋，可以指定的一個(gè)值，如果 600，或者特殊的值绽族，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）姨涡。
height：和 width 相對應(yīng)，指定高度项秉。
initial-scale：初始縮放比例绣溜，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例娄蔼。
minimum-scale：允許用戶縮放到的最小比例怖喻。
user-scalable：用戶是否可以手動(dòng)縮放
九、背景漸變岁诉，盒子陰影锚沸，文字描邊
/* 背景漸變 */
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;
