注意：本文原创，转载请说明出处
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-300px),然后对父级使用overflow:hidden隐藏溢出图片，同时为了兼容IE6我们设置个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背景透明*/
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. 90%;/*写给不支持calc()的浏览器*/
-moz-calc(100% - (10px + 5px) * 2);
-webkit-calc(100% - (10px + 5px) * 2);
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- 480px) {
#divMain{
float: none;
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%;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限制字数，超出部份显示点点点
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
{
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;
});