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;
});
web h5常用代码总结的更多相关文章
- H5常用代码:页面框架
万变不离其宗,道法自然! 虽然H5的小项目一波又一波,但有一个东东基本没什么变化,那就是整个页面的框架结构. 我所常用的H5常用页面框架如下: <!DOCTYPE html> <ht ...
- H5常用代码:适配方案5
此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框 ...
- H5常用代码:适配方案4
前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正 ...
- H5常用代码:适配方案3
在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...
- H5常用代码:适配方案2
前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接 ...
- H5常用代码:适配方案1
在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视 ...
- web前端常用代码于面试等资源
https://www.cnblogs.com/moqiutao/p/4766146.html
- web.xml常用元素配置
tomcat服务器: tomcat是一个WEB服务器,所有的j2ee WEB程序可以在此处运行. tomcat服务器是一个符合j2ee标准的WEB服务器.则J2ee的EJB程序无法在此处运行. 如果要 ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
随机推荐
- scatter参数
列出scatter常用的一些参数: plt.scatter(x,y,c= '颜色可选',marker= '点的样式', cmap= '颜色变化',alpha=“透明度”, linewidths=“线宽 ...
- spring cloud config svn仓库配置
之前快速入门了一下spring cloud config 但是仓库用的别人博客上的git仓库,公司用的是svn项目管理中心,下面这个自己配置的时候出现的错误 You need to configure ...
- RuntimeError: Model class app_anme.models.User doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.---python学习错误记录
untimeError: Model class app_anme.models.User doesn't declare an explicit app_label and isn't in an ...
- iis 支持 .netcore 环境
1,安装 dotnet-win-x64 https://dotnet.github.io/2,安装 DotNetCore.1.0.4_1.1.1-WindowsHosting.exe https:/ ...
- asp解码.net传参
get传参时 asp默认使用gbk解码?了解的朋友指点下,谢谢 .net向asp传参时注意urlencode加密编码使用gb2312 附:任何语言的数据交互都要确保接收双方的编码一致
- Oracle 生成工作日历表
select to_char(everyDay, 'yyyy-mm-dd') as dt, to_char(everyday, 'yyyy') as yr, to_char(everyday, 'mm ...
- App测试之Monkey压力测试
- java项目 在 linux ubuntu 上的部署相关
--------------------JDK在linux ubuntu上的安装------------------------------------------------------------ ...
- Input禁用文本框
<input type="text" readonly="readonly" /> readonly:只读属性:
- js隐藏字符串中间部分
在进行web前端页面开发中,有时需要从后台获取用户数据来显示在前台页面,但是考虑到用户信息安全的问题,就需要对这些信息进行处理,使其不完全显示出来,例如姓名,两个字的显示姓,名字用*代替,电话前三位和 ...