web h5常用代码总结

注意：本文原创，转载请说明出处

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;
    });