![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端技巧
十三浪
你的闲暇决定你的人生!
展开
-
前端经典面试题:行内元素与块级元素比区别
一次偶然的面试遇到的题目,虽然当时知道块级元素和行内元素的区别,但是没有仔细去想。一、行内元素与块级元素 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> ...原创 2020-08-05 15:51:47 · 486 阅读 · 0 评论 -
权威解析<head>头部
meta定义和用法<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对参照 W3Chttps://msdn.microsoft.com/zh-cn/library/ff724037(v=expression.40).aspxhttp://segmentfault.com/a/11原创 2020-08-05 15:48:45 · 381 阅读 · 0 评论 -
移动前端webapp(html5页面)
CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。 1 2 3 4 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl.原创 2020-08-05 15:47:12 · 5289 阅读 · 0 评论 -
区分各浏览器的CSS hack(包含360、搜狗、opera)
固然说应用css hack来解决页面兼容性bug并不是个好办法,然则有时辰这些hack还是用的着的,比如你接管了一个二手或是三手的遗留界面,混乱无章的css代码,只在某个浏览器下有兼容bug,并且须要短时候内处理惩罚。 下面一段代码可以让你很快哄骗css来为特定的浏览器指定样式。不久不多赘述,看码即懂:属性过滤:_height:10px; /* IE6支撑 */*he转载 2014-05-29 16:34:02 · 2320 阅读 · 0 评论 -
在ie7、ie8下 td th宽度解决方法
.title {background-color:#ccc;width: 150px}哈哈aa大都会bbadadalkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快转载 2014-07-22 15:31:59 · 4898 阅读 · 0 评论 -
Jquery焦点与失去焦点
$(function(){$("#input").focus(function(){//#input换成你的input的ID//这里写获得焦点之后运行的代码。})})原创 2014-06-09 17:09:59 · 506 阅读 · 0 评论 -
css3图片过滤效果
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">css3图片过滤效果 body{ background: #eee; }img{ width:200px; height:150px;} .g转载 2014-06-27 13:14:55 · 569 阅读 · 0 评论 -
用CSS3实现对图片的放大效果
用CSS3实现对图片的放大效果用CSS3对图片放大效果.right_div .topicons li a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -transform:scale(1.5,1.5); }转载 2014-06-27 13:13:21 · 866 阅读 · 0 评论 -
页面顶部显示的进度条效果
页面顶部显示的进度条效果// jQuery(document).ready(function(){ jQuery("#web_loading div").animate({width:"100%"},800,function(){ setTimeout(function(){jQuery("#web_loading div").转载 2014-06-25 14:13:17 · 560 阅读 · 0 评论 -
jquery 点击函数切换 toggle() 及其其他实现点击切换
toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。 返回值 jQuery 参数 fn (Function) : 第奇数次点击时要执行的函数。 fn (Funct原创 2014-06-03 15:16:45 · 2123 阅读 · 0 评论 -
7月29日BUG汇总
第一个是inline-block的事情 会莫名换行 所以只能hack 语义原创 2014-07-29 15:52:37 · 510 阅读 · 0 评论 -
css固定宽度超出文字自动省略号显示
方案一:代码如下:text-overflow : ellipsis; white-space : nowrap; overflow : hidden;除了固定div或者其他容器宽度以外要显示为点点,以上3个缺一不可;还有,除了firefox,opera其他浏览器都支持,包括可恶的ie6方案二:下文为转摘原创 2013-11-20 10:55:43 · 1379 阅读 · 0 评论 -
编写"html邮件/EDM邮件"注意事项
专业的EDM邮件(Email Direct Marketing 电子邮件营销)发送,是有严格的制作要求的,本指南从格式编码、文字、图片及链接四个方面给出指引,请逐条按照本指南制作您的EDM邮件模板。格式编码1、页面宽度请设定在600到800px以内,长度1024px以内。2、HTML编码请使用utf-8。3、HTML代码在15KB以内。(各个邮箱的收件标准不一样,如果超转载 2015-03-31 14:21:34 · 886 阅读 · 0 评论 -
简易click事件判断取代toggle
$(".btn").on("click",function(){ //通过判断按钮btn有没有active这个class名判断是否已经点击过 if($(this).hasClass("active")){ //如果有了active,假设已经点击过了 //执行你的代码 //把active去掉 $(this).removeClass("act转载 2015-07-13 15:41:19 · 621 阅读 · 0 评论 -
防止在iOS设备中的Safari将数字识别为电话号码
在测试中发现iPad上的Safari总会把长串数字识别为电话号码,文字变成蓝色,点击还会弹出菜单添加到通讯录。别的地方倒也罢了,如果在用户名中出现数字(手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”),版式会很恶心。经过测试在a标签中的长串数字不会识别为电话,于是给出现用户名但没有链接的地方嵌套一个无动作的a标签,临时解决了这个问题。但是这样增加了额外的标签,代转载 2015-07-29 12:01:36 · 1847 阅读 · 0 评论 -
webapp一些东西
开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。 WebApp与Native App有何区别呢? Native App: 1、开发成本非常大。 一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦转载 2015-07-29 12:01:43 · 633 阅读 · 0 评论 -
session过期问题
Session清理解决问题 Session.Abandon(当前页面结束之后删除Session对象)Session.Clear(清理Session对象中的内容)Abandon Abandon方法删除所有存储在 Session 对象中的对象并释放这些对象的源。如果您未明确地调用 Abandon方法,一旦会话超时,服务器将删除这些对象 。语法 Se转载 2015-07-20 10:52:04 · 1322 阅读 · 0 评论 -
H5点击及focus效果
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px}a.react:active,a.react.react-active,label.react:active {background: rgba(0, 0, 0, .1)}原创 2015-07-23 19:02:02 · 4070 阅读 · 0 评论 -
CSS实现背景图片居中
<!doctype html><html><head><meta charset="utf-8"><title>标题</title></head><body style=" background:url(psb.jpg) top center no-repeat #000原创 2014-05-12 15:34:01 · 1055 阅读 · 0 评论 -
jquery.cookies的使用
//初始化页面时验证是否记住了密码$(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName")); $(转载 2014-06-06 17:00:25 · 497 阅读 · 0 评论 -
清晰高效代码规范
写高效代码是一项艺术,你必须学习和实践它,清晰高效代码有利于团队合作,有利于性能优化。下面总结一下清晰高效代码的规范:一、排版:1、关键词和操作符之间加适当的空格。2、相对独立的程序块与块之间加空行3、较长的语句、表达式等要分成多行书写。4、划分出的新行要进行适应的缩进,使排版整齐,语句可读。5、长表达式要在低优先级操作符处划分新行,操作符放在新行之首。6、循环、判转载 2014-06-26 17:00:15 · 537 阅读 · 0 评论 -
关于下载PDF无法直接下载的问题
一般浏览器现在都能直接读取PDF 文件,但是由于需要,我们直接改成点击下载,操作比较简单只要放在压缩包里面就可以了——upsvoice原创 2013-11-14 11:13:52 · 1949 阅读 · 0 评论 -
常用的按钮文字旁边带icon的CSS
text-transform: uppercase;font-size: 10px;padding: 7px 28px 6px 0px;background: url("../media/wm3/wm2-learnmorearrow.png") no-repeat scroll right center transparent;原创 2013-11-27 16:17:39 · 1746 阅读 · 0 评论 -
CSS 实现箭头
相对来说CSS 实现箭头产生的效果简单一点,根据需要来安排。毕竟有些效果是CSS 无法实现的 那就直接切图吧!三角形叠加.pos_rel { position:relative; _line-height:0; width:40px; height:23px;}.pos_rel .icon1 {原创 2013-11-13 12:14:32 · 668 阅读 · 0 评论 -
延迟加载各种
1:setTimeout(function(){alert("Hello world");},10000);2:script>// xigae ,2009-14-17var psto = window.setTimeout;//保留系统原方法句柄window.setTimeout = function(fun,tCount){ if(typeof fun =='function'原创 2013-11-12 11:10:33 · 688 阅读 · 0 评论 -
jQuery解决input中placeholder值在ie中无法支持的问题
无标题文档//第一种方法$(document).ready(function(){ var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(inpu转载 2013-11-12 10:40:42 · 1393 阅读 · 0 评论 -
常用的图片居中HTML实现兼容较好
22:20 2011-5-15垂直居中及容器内图片垂直居中的CSS解决方法作者:vinci 日期:2007-05-09Div与CSS布局,最让人头疼的就是容器内的东西如何垂直居中的问题,我在做站时也遇到,查了一下资料,总结出以下居中办法,兼容IE与及Firefox方法一 HTML代码* {margin:0;padding:0}div { width:5转载 2013-11-11 09:42:51 · 499 阅读 · 0 评论 -
CSS float 属性——清除浮动
方法1: 如果子div用了float,那么display:block和clear:both两个样式就没了,所以就不会撑 开父div,可以在子div后面加一个来解决。 此方法对ie6、ie7、ff都有效。 方法2: a.定义一个伪对象。 .clearf转载 2013-11-11 09:40:32 · 578 阅读 · 0 评论 -
js上传图片预览
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml"> body> input type=fi转载 2013-11-21 15:39:09 · 699 阅读 · 0 评论 -
DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
导读:有些相对可以学习,有些已经不是最好的解决方法了,看大家喜欢!CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中转载 2013-11-28 11:07:39 · 918 阅读 · 0 评论 -
非电脑平台下hover自动弹出的解决方案
var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexO原创 2013-12-09 14:52:55 · 624 阅读 · 0 评论 -
源生js回到顶部
回到顶部html{ _overflow:hidden; }body{ _overflow:auto; height:100%;}#div{ background:#ccc; width:400px; height:1500px; text-align:center;}#returntop{转载 2014-05-05 09:16:54 · 1119 阅读 · 0 评论 -
jQuery判断点击事件是否在目标区域
很多时候需要在鼠标点击非目标区域div将目标div隐藏的效果,这是需要判断点击事件是否在目标区域内,// 判断点击区域 隐藏/显示其他区域document.onclick = function(e) {e = window.event || e; // 兼容IE7obj = $(e.srcElement || e.target);// 点击区域位于当前节点if (obj.attr('i转载 2014-06-06 09:26:25 · 3056 阅读 · 0 评论 -
css3中webkit-box
1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。提供的关于盒模型的几个属性:box-orient 子元素排列 vertical or horizon转载 2014-06-25 11:07:19 · 762 阅读 · 0 评论 -
js<a>标签调用函数
点击超链接调用javascript函数,一般人都用但这有个缺点,就是点击链接后,页面上的GIF动画将静止。试看如下代码:<!--function Foo(){ //do something}//-->使GIF动画静止的链接解决方法探讨:链接此时不影响动画显示,但鼠标移上去后,鼠标及超链接样式不发生变化,虽然可以利用样式表来改变鼠标及超链接样式,但毕竟转载 2014-06-05 17:16:48 · 1761 阅读 · 0 评论 -
透明css详
.MyElement{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}具体参数含义如下:opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。转载 2014-04-23 13:18:39 · 491 阅读 · 0 评论 -
CSS实现圆角、透明在IE、火狐中的代码兼容解决办法
用CSS实现圆角和div透明效果时会遇到一些浏览器兼容性问题,比如下面列举的这些代码,在IE和火狐中对应有不同的代码,对于一个优秀的前端设计师,考虑到兼容性这是必需的。//CSS:透明 IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF:opacity:0.6。 //CSS:圆角 IE:不转载 2014-04-22 16:34:29 · 721 阅读 · 0 评论 -
竖排文字
竖排文字 h1 { width: 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } 今天天气不错原创 2014-04-22 16:33:14 · 523 阅读 · 0 评论 -
腾讯QQ和淘宝旺旺在线客服代码
腾讯QQ和淘宝旺旺在线客服代码,可以放上阿里旺旺和QQ的号码,平时隐藏在左侧,鼠标移上后显示,与其它客服表现的形式大致一样。转载 2014-05-05 09:28:03 · 1902 阅读 · 0 评论 -
JS加入收藏夹
JS加入收藏夹代码,好就好在它具有全兼容性,兼容IE6、IE7、IE8及流行的火狐浏览器,这大大增强了本代码的实用性。JS加入收藏夹function addfavorite(){ if (document.all) { window.external.addFavorite('http://www.baidu.com','收藏夹转载 2014-05-05 09:22:46 · 880 阅读 · 0 评论