註意：本文原創，轉載請說明出處

1.使圖片和文字水平居中，給圖片css樣式：vertical-align: middle;
vertical-align:middle的時候，是該元素的中心對齊周圍元素的中心。

2.給一個div透明背景，給div添加css: opacity:0.7; filter:alpha(opacity=70);

3.兼容各個瀏覽器，添加css樣式：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

4.如何通過css修改密碼框默認是黑點的樣式，比如想改成*星號，如何實現？
<input id="mima" onKeyUp="document.getElementById(‘a‘).value=this.value.replace(/./g,‘%‘);" />
那個%隨你改，改什麽顯示什麽。

js控制，input密碼顯示‘*‘的鏈接地址：http://www.xuebuyuan.com/1346201.html

5.兼容 IE 和 FF 的換行 CSS 推薦樣式：word-wrap:break-word; overflow:hidden;（這個是最好的方式）

一般情況下只需要設置好寬度限制，比如這裏只設置最大寬度為300px(max-width:300px),然後對父級使用overflow:hidden隱藏溢出圖片，同時為了兼容IE6我們設置個width:expression(this.width > 300 ? "300px" : this.width);解決即可。

下面的這種方法就可以解決背景透明，文字不透明的問題了：
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現FF背景透明，文字不透明*/
background:#000; filter:Alpha(opacity=20);/*實現IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*實現IE文字不透明*/

6.去除chrome谷歌瀏覽器input自帶邊框
在css中加入代碼：
1 input,button,select,textarea{outline:none}
2 textarea{resize:none}
不過在比較低版本的谷歌瀏覽器和360極速瀏覽器還是會出現了，最完美的還是更改這個邊框樣式，即把把邊框設為跟設計稿中的邊框大小顏色都一樣，即：border:#f7bed8 1px solid;

7.width: 90%;/*寫給不支持calc()的瀏覽器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);

8.CSS屬性 table 的 border-collapse 邊框合並 給table一個屬性 border-collapse:collapse;

9.在網站HTML文件的開頭，增加viewport meta標簽告訴瀏覽器視口寬度等於設備屏幕寬度，且不進行初始縮放。代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />

webstrom 快捷鍵：meta:vp 按tab鍵

10.在CSS文件尾部增加針對不同屏幕分辨率的規則。例如使用如下的代碼，可以讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標簽名稱只需修改一下即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}

11.頁面使用相對字體 在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。

12.HTML禁止網頁文字復制，禁止查看源代碼
(1)禁止復制
放在任意位置
<script language=javascript>
window.onselectstart=function() {return false;} //禁用選擇
window.oncopy=function() {return false;} //禁止復制
</script>

(2)禁止查看源代碼
放在頭部
<script>
function stop(){
return false;
}
document.oncontextmenu=stop;
</script>

13.WOW.js - 頁面滾動動畫展示 (WOW.js 能讓頁面滾動時顯示動畫，使頁面更有趣。)

14.@font-face {
font-family: ‘方正卡通簡體Regular‘;
src: url(‘方正卡通簡體.eot‘);
src: local(‘方正卡通簡體 Regular‘),
local(‘方正卡通簡體‘),
url(‘方正卡通簡體.woff‘) format(‘woff‘),
url(‘方正卡通簡體.ttf‘) format(‘truetype‘),
url(‘方正卡通簡體.svg#方正卡通簡體‘) format(‘svg‘);
}

15.var width=($(window).width()-1100)/2;
$(‘.side-nav-wrap‘).css(‘left‘,width-152+‘px‘);

16.解決iOS手機上input的button按鈕顏色顯示問題
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }

17.解決手機點擊input的text的時候，出現背景色
-webkit-tap-highlight-color:rgba(0,0,0,0);

18.解決1920px的圖片水平居中<div style="text-align:center; position:absolute;top:0;left:50%;width:1000px;height:420px;margin-top:0px;margin-left:-960px"></div>

19.文字上下左右全有陰影：text-shadow: 1px 1px 3px white,0 -1px 3px white,-1px 0px 3px white;

20.<input type="text" id="keywords" name="keywords" value="輸入搜索關鍵詞" onfocus="JavaScript:if(this.value==‘輸入搜索關鍵詞‘)this.value=‘‘;" onblur="javascript:if(this.value==‘‘)this.value=‘輸入搜索關鍵詞‘;"/>

21.去掉textarea右下角默認三條灰色斜杠 resize:none;

web h5常用代碼總結