前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无数张图片"唰唰唰"的闪出来了.在这个过程中,浏览器会把这个网站的主资源(就是Html文件)拉取回来,然后开始分析网页中的Js,Img之类的标签,然后再去拉取这些图片和资源.可想而且这会多么的消耗内存.对于浏览器来说,他们的请求方式都是发起一个Http请求,经历三次握手. 首先我们来讲讲什么…

border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dotted border-color 颜色 默认颜色是字体颜色 border-style 类型 可以综合写成:border:width color style 注意点: 边框是绘制在背景之上,因此.有些透明的背景会与边框重合. 总结: 1.设置一个边border有颜色,设置旁边两条边border颜色透明…

一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发…

下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高度相同 在新标签页/窗口打开外部链接 通过文本查找元素 在改变visibility时触发 AJAX调用错误处理 链式插件调用 返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top'…

下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高度相同 在新标签页/窗口打开外部链接 通过文本查找元素 在改变visibility时触发 AJAX调用错误处理 链式插件调用 返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top'…

老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方便的往往是自己. 碰到一堆问题时,一次只尝试解决一个问题. 没把握一眼看出问题症结的时候,老老实实单步调试. 设计模式是个好东西,但不要强行使用. 没造成可观的损失前不要尝试做性能优化. 没事别重复造轮子. 大多数情况下Boss不关心技术含量,而且往往简单的解决方案更快更有效果. 不要害怕接触新知识…

一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" download>下载</a> 但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力. 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助J…

一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-height 继承box-sizing 表格单元格等宽 使用Flexbox摆脱边界Hack 使用属性选择器选择空链接 使用:not()添加/去除导航上不需要的边框 添加边框… /* 添加边框 */ .nav li { border-right: 1px solid #666;…

下面总结了几个日常使用PS的小技巧,希望对大家有所帮助(重点推荐第一个小技巧) 场景一:用ps测量PSD图中的元素宽高间距时,一般是手动使用 测量,但其实是有快捷键的,如下图 首先选中元素相应图层,然后ctrl+t(会进入下图箭头所示模式,按esc取消该模式)   同时,右边信息栏会显示该元素宽高                    选择窗口-信息(调出上图信息栏)    场景二:若你想改变PSD的大小,比如UI给的PSD是宽度750px,你想改成640px 图像-图像大小调出设置宽高的窗口…

javascript中10常用的个小技巧总结 本文转自:http://www.cnblogs.com/libin-1/p/6756393.html 1. new Set() 可能有人知道ES6中提供了新的数据结构 Set,但是能够灵活运用的人或许不多.利用Set数据结构我们能够轻松的去重一个数组,比如: let arr = [1, 2, 2, 3]; let set = new Set(arr); let newArr = Array.from(set); // Array.from方法可以将…