注意：本文原創，轉載請說明出處
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;
22.在ios端，我們不想使用按鈕或輸入框自帶的圓角樣式，改如何取消呢？
- -webkit-appearance : none ;/解決ios上按鈕的圓角問題/
- border-radius: 0;/解決ios上輸入框圓角問題/
23.如何使網頁打開時，光標默認在輸入框中，就像打開百度首頁，光標就自動在輸入框里閃爍那樣
jq: $(document).ready(function(){$('input[type=text]:first').focus();});
js：window.onload=function(){
var items = document.getElementsByTagName('input');
for(var i = 0; i < items.length; i ++) {
if (items[i].type == 'text') {
items[i].focus();break;
}
}
}
24.H5頁面輸入框光標垂直居中
修復方法：
1. 設置line-height與字體大小一樣的值
2. 利用padding的上下邊距將文字和光標居中（demo中line-height原本期望值為3.4, 用3.4-1.4的字體大小，得到的2在對半分就是內邊距的數值了）
25.jQuery處理圖片加載失敗的常用方法
// 方法 1：更換圖片地址
$('img').error(function(){
$(this).attr('src', '加載失敗.png');
});
// 方法 2：隱藏它
$("img").error(function(){
$(this).hide();
});
26.怎么實現css限制字數，超出部份顯示點點點
width:150px;/*要顯示文字的寬度*/
overflow:hidden; /*超出的部分隱藏起來。*/
white-space:nowrap;/*不顯示的地方用省略號...代替*/
text-overflow:ellipsis;/* 支持 IE */
多行文本溢出顯示省略號，如下。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
26.
/*滾動條*/
/*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #e3e3e3;
border-radius: 10px;
}
/*定義滾動條軌道 內陰影+圓角*/
/*
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #e3e3e3;
}
*/
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: #666;
}
27.返回頂部Jquery代碼：
$("#returnTop").click(function () {
var speed=200;//滑動的速度
$('body,html').animate({ scrollTop: 0 }, speed);
return false;
});
浙公網安備 33010602011771號