web h5常用代码总结

Posted 2020-09-18

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

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 能让页面滚动时显示动画，使页面更有趣。)

[email protected] {
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;