前端开发
清枫草塘
HTML+JS+CSS,Html5+CSS3,Canvas/SVG,PHP+MySQL
展开
-
Sublime Text 无法使用Package Control或插件安装失败的解决方法
本文主要介绍Sublime Text如何开启debug模式,以及分析一些使用过程中常见错误的解决方法。情形一Package Control:There are no packages available for installation。情形二:Package Control:Unableto download Emmet.Please view the console for more details. Error while loading PyV8 binary:exit code 3 …情形三:无法原创 2015-03-14 17:57:18 · 466968 阅读 · 49 评论 -
史上最全的CSS hack方式一览
什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。原创 2013-09-28 15:57:08 · 219529 阅读 · 15 评论 -
iOS6之Smart App Banners推送APP新功能
iOS6新标签apple-itunes-app提供了一个叫 Smart App Banners的功能, 当你在iOS移动平台访问一个网站时,会提示你去App Store下载这个网站的官方App。Smart App Banners自动识别用户设备是否支持该应用APP,如果设备不兼容,则下载广告条不会显示。语法格式为:其中ID为必选。 App ID (required), A原创 2013-08-05 11:45:25 · 4959 阅读 · 3 评论 -
Web App开发入门
WebApp与Native App有何区别呢?Native App:1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要用户手动更新,但是也需要有一个恶心的提示)。3、非常酷。因为native app可以调用IOS中的UI控件以UI方法,它转载 2013-10-08 18:28:42 · 5385 阅读 · 0 评论 -
HTML文档类型DTD与浏览器怪异模式
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义了DOCTYPE浏览器则会进入标准模式(Standards Mode),否则浏览器会进入怪异模式或混杂模式(Quirks mode)。 浏览器开发初期W3C倡导的网页标准并不流行,因此浏览器有独特的对网页标签或属性的解析模式,随着日后网页标准的流行,浏览器增加了对新标准的支持(Standards Mode),但原创 2013-09-12 19:45:02 · 11325 阅读 · 0 评论 -
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering)优点:1.支持跨浏翻译 2013-09-11 21:06:11 · 390115 阅读 · 11 评论 -
jTemplates异步加载实现与HTML5 video视频开发
最近做有关Web App有关的项目,为了动态加载相应速度更快,采用了以下几个策略:1.PHP后台提交自动生成静态列表页面。2.PHP后台提交自动生成列表页资源/文章的json数据文件,javascriptFileName.js。2.列表页滑动加载使用jTemplate读取javascriptFileName.js数据文件的数据进行展现。主要代码:{#foreach原创 2013-09-04 19:03:25 · 7968 阅读 · 0 评论 -
jQuery选择器引擎和Sizzle介绍
首先介绍一下什么是Sizzle:Sizzle是一个纯javascript CSS选择器引擎。jquery1.3开始使用sizzle,Sizzle一反传统采取了相反的Right To Left的查询匹配方式,效率提高.Sizzle是jQuery作者John Resig新写的DOM选择器引擎,速度号称业界第一.Sizzle完全独立于jQuery,若不想用jQuery,你可只用Sizzle实现,压缩原创 2013-09-01 00:28:30 · 21166 阅读 · 0 评论 -
在线调试和演示前端开发工具
做前端开发将近五年了。今天来整理以下常用的工具。1.jsfiddle 在线调试http://jsfiddle.net/ 2.JSBin 连接http://uixdk.com/ 3.TinkerBin 访问http://tinkerbin.com 4.Google Code Playground地址 http://code.google.co原创 2013-09-01 01:04:38 · 2618 阅读 · 0 评论 -
CSS和javascript+jQuery技巧小结
<!--table.dataintable {border:1px solid #AAAAAA; border-collapse:collapse; font-family:Arial,Helvetica,sans-serif; margin-top:10px; width:100%}table.dataintable td {background-color:#E原创 2013-06-14 18:19:12 · 2975 阅读 · 1 评论 -
【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件
Accordion(手风琴)是网站中常用的效果之一,用于一组内容(图片、文本等)之间的切换显示。使用 jQuery 能够轻松实现 Accordion 效果,今天这篇文章向大家推荐网站开发中常用的20款优秀 jQuery 手风琴效果插件。您可能感兴趣的相关文章期待已久的2012年度最佳 jQuery 插件揭晓精心挑选的优秀 jQuery Ajax 分页插件和教程推荐几款非常棒的转载 2013-12-10 14:41:28 · 7416 阅读 · 0 评论 -
Responsive Design响应式网站设计心得笔记
网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览。今天把首页做好,并测试无误,这里把一些应该记录的东西写下来,一是备忘,二是分享给需要的人。这次要讲的包括6个问题,1)html5标签的支持,2)响应式设计的单位选择,3)IE对媒体查询media query的支持,4)png24与png8图片选择的再探讨和IE私有滤镜filter:AlphaImageLoader的重温,5)定位position:fixed与IE6固定和抖动现象的恩怨,6)移动设备轮播图swipe插件和touchsli原创 2013-12-19 22:29:57 · 8358 阅读 · 1 评论 -
Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同源策略的限制。跨域的情形有很多,最常见的有Ajax跨域、Socket跨域和Canvas跨域。下面列举一些我们常见的跨域情形下,某些浏览器控制台给出的错误提示。FireFox下的提示:已阻止交叉源请求:同源策略不允许读取***上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。Canvas原创 2015-03-12 16:53:36 · 116297 阅读 · 2 评论 -
信不信由你!iPhone6屏幕宽度不一定是375px,iPhone6 Plus屏幕宽度不一定是414px
看到这个题目你可能不信,促使我探究这个问题的缘由是几次项目中Chrome模拟器和iPhone6真机预览效果不一致。为什么在Chrome Emulation模拟手机页面和真机预览效果不一致?以前觉得不外乎两个原因:1.某些机型或浏览器对一些CSS属性不支持。2.某些设备不支持12px以下字体。今天要补充第3个原因:对于iPhone手机还会与手机系统设置的显示模式、设备硬件有关。原创 2015-03-19 11:44:43 · 51971 阅读 · 4 评论 -
移动端Web开发调试之Weinre调试教程
在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某系统浏览器下页面怎么怎么滴。看着满满的测试汇总文档,我们曾经在一个又一个知名或不知名的手机终端上重复着这些工作:仔细的排查代码,alert可疑的变量,甚至不惜重构来尝试解决这种不一致的问题。虽然说Android 4.0+以上的移动设备支持桌面版Chrome远程调试,而且在Android 4.4以下也仅限于预览Chrome手机版浏览器内部效果,我们无法在问题浏览器下实时联调原创 2015-01-12 11:53:02 · 48585 阅读 · 9 评论 -
[整理]JavaScript跨域解决方法大全
跨域的定义:Javascript出于安全性考虑,同源策略机制对跨域访问做了限制。域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。实际上,同源策略就是浏览器的一种保护机制,只要请求双方的URL协议、原创 2014-11-05 18:45:31 · 12320 阅读 · 0 评论 -
最齐全的网站元数据meta标签的含义和用法
最齐全的网站元数据meta标签的含义和用法随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到如今Windows 7、Windows 8的IE9、IE10、IE11,对Html5的支持越来越好,html meta标签的功能作用也越来越强大。 application-name, msapplication-tooltip,msapplication-starturl,msapplication-window,msapplication-navbu原创 2014-05-08 17:56:28 · 29449 阅读 · 3 评论 -
百度分享新浪微博无法分享图片的解决方法
偶然发现,文章分享到sina weibo竟然不能将附带的图片。后来查了一下,发现,不只我遇到了这个问题。经过查看百度分享官方的帮助文档,发现帮助文档是依照旧版的分享代码指导自定义使用的。而首页获取到的代码是最新版的分享代码,最新版分享代码虽然支持微信。但是在分享到新浪微博的时候有个问题,就是文章内容中的图片不能随之分享到微博中。不清楚这算不算插件的bug。发现好多大网站也用了百度分享,也存原创 2014-07-30 15:57:54 · 13185 阅读 · 0 评论 -
WEBAPP介绍及其iOS Web开发技巧总结
结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。WebApp与Native原创 2013-08-26 19:17:50 · 57693 阅读 · 2 评论 -
Sublime Text2两款漂亮的主题皮肤安装与切换使用方法
用ST2快两年了。比较漂亮好用。这次换电脑了,需要重装,原创 2014-06-09 18:16:44 · 115263 阅读 · 1 评论 -
JavaScript跨域总结与解决办法
什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充转载 2013-08-22 12:56:45 · 1689 阅读 · 0 评论 -
CSS 属性text-rendering的介绍和使用
CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性(清晰度)和几何精度方面做一个权衡。属性text-rendering正是一个SVG属性,目前尚没有任何的CSS标准对其进行定 义。不过Gecko(for Firefox)和WebKit核心的浏览器已经允许你在 Windows/Mac/Linux系统的HTML/XML内容中应用该属性。对于某些小于20px的字体来说,当你把该属性设为optimizeLegibility时,包含 诸如ff原创 2013-08-09 13:20:15 · 30040 阅读 · 0 评论 -
web前端优化之GZIP组件缓存
web前端14 条优化军规:1.尽可能的减少 HTTP 请求数,可以使用CSS Sprites尽量将图片集成在一个大图片里。2.使用 CDN3.添加 Expires 头 ( 或者 Cache-control)4.Gzip 组件缓存技术5.把 CSS 样式放在页面的上方。6.将脚本放在底部 ( 包括内联的 )。7.避免在 CSS 中使用 Expressions。原创 2012-03-29 14:33:48 · 4462 阅读 · 0 评论 -
关于网址URL是否区分大小写的问题
网站原来的机型列表不全面不完善,需要重新做机型表,但是问题来了,以前有的机型不规范是大写字母,现在要改为小写字母,于是引出域名和路径大小写的问题。 网址的基本结构是:[协议]://[域名]/[路径],经过测试和查询,确定其中协议和域名部分是不分大小写的。路径是否区分大小写则需要看情况,不能一概而论。是否与大小写有关还取决于与后台的实现方式,和服务器所采取的操作处理以及服务器的系统平台有原创 2012-05-16 18:39:58 · 12699 阅读 · 0 评论 -
Firebug 调试器开发中的12个技巧
Firebug 调试器开发中的12个技巧 相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道,其实它是一个在网页设计方面功能相当强大的编辑器,它可以对 HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件,所以建议各位Web开发者,要充 分利用FireF转载 2012-10-06 15:46:33 · 1677 阅读 · 0 评论 -
“在当前架构中,不允许此元素包含自身。请删除结尾斜线。” 原因分析与解决办法
相信有很多朋友在使用Microsoft Expression Web制作页面,有时候网页中会在某些标签上显示红色的波浪线条,鼠标移上,提示“在当前架构中,不允许此元素包含自身。请删除结尾斜线。” 奇怪了,为何写的是过渡类型的文档类型XHTML1 transitional,却依然会提示? 一般来说提示代码不符合HTML或XHTML规范,应该考虑到文档类型DOCTYPE是不是有问题。是没有原创 2011-09-22 22:36:08 · 1120 阅读 · 0 评论 -
jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果
一、BxCarousel实现图片滚动切换BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有:◆ 可以指定显示的元素总数◆ 可以指定每次滚动的元素个数◆ 自动播放模式◆ 前一张/后一张按钮控制图片流动参数含义:display_num:显示元素的数量,几张图片move:单击左右控制键时,移动的元素个数,此处为移动2张图片pre原创 2013-05-14 19:09:21 · 6473 阅读 · 0 评论 -
几款swf flv flash网页播放器
项目中需要在网页中嵌入flv视频,这才发现想找一个跨浏览器,并能在各个手机浏览器中也能正常显示的flv网页播放器真是困难啊!先列一些播放器在下面作参考了,但没有时间一个个去检查! ~~~~(>_1. VideoboxVideobox其实不是播放器,只是用来嵌入播放器的脚本而已,是一个只有6k大小的脚本,用于在页面中显示视频。Videobox使用swfobject来嵌入Flash转载 2013-05-16 11:45:28 · 20882 阅读 · 0 评论 -
线性渐变-linear-gradient和滤镜opacity/filter的透明效果兼容性解决方案及其RGB/RGBA与16进制转换方法
第一篇:滤镜opacity/filter的透明效果兼容性解决方案RGB/RGBA介绍项目中需要实现透明遮罩效果,使用opacity/filter会使得内部元素都透明,而实际中的文字内容我们不想让其透明化,这时候就需要考虑其他的实现方法。我们知道,RGB色彩就是常说的三原色,RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的原创 2013-04-26 17:34:50 · 14582 阅读 · 0 评论 -
读书笔记-Don't Make Me Think(Steve Krug)
如果一个东西很难用,我就不会经常使用它。第一章:别让我思考(Krug可用性第一定律) 设计者应该尽量做到让每一个页面都不言而喻、一目了然、自我解释的。普通用户只需看他一眼就知道是什么内容,知道该如何使用。如果不能让一个页面不言而喻,起码要做到自我解释。 第二章:我们实际上是如何使用Web的(扫描,满意即可,勉强应付) 为什么我们需要的东西总是在最后一个地方找到?因为你找转载 2013-04-14 17:07:07 · 1759 阅读 · 0 评论 -
基于webkit浏览器开发html/css3的web应用程序
在当今web市场上已经有不少web站点开始引入html以及css3,但是短时间内几乎所有站点都得考虑兼容不支持html5以及css3的浏览器,如 IE系列(IE9虽然支持,但是再耐心等吧)。但是令人十分高兴的是,在移动领域html5和css3是可以放心使用的,而且可以不必考虑兼容,因为移动 市场通常都是针对目标人群开发应用。在移动互联网上,有2大平台占据了高端用户市场,一是iphone os 另外转载 2013-05-21 17:48:15 · 2021 阅读 · 0 评论 -
getClientRects 和 getBoundingClientRect 的用法和区别
getClientRects获取元素占据页面的所有矩形区域 描述获取元素占据页面的所有矩形区域。语法 var rectCollection = object.getClientRects();值getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。TextRectangle对象包含了, top原创 2013-05-28 17:44:29 · 55298 阅读 · 2 评论 -
iScroll 4的用法
概要iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的转载 2013-08-06 13:01:19 · 15479 阅读 · 1 评论 -
iScroll4插件的使用实例
iScroll是Matteo Spinelli开发的一个滚动插件,使用原生js编写,其不依赖与任何js框架。iScroll 4 完全重写了iScroll这个框架的原始代码。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。 目前正在开发iscroll5还未发布。iscroll 4.2版本兼容:iPhone/Ipod tou原创 2013-08-06 13:32:00 · 11682 阅读 · 1 评论 -
中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案Chrome 27之前的中文版浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增加识别难度,尤其是中文常用的宋体和微软雅黑。而我们在实际项目中,对于数字/英文内容,其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示,这个时候就需要取消浏览器的自动调整功能了。一般原创 2013-08-04 15:05:54 · 51849 阅读 · 2 评论 -
移动Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案。开始吧在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集,这种文章只需要左右滑动浏览,最好的体验是让图片缩放显示在屏幕有效范围内,防止图片太大导致用户需要滑动手指移动图片来查看这种费力气的事情,用户体验大大降低。二是图文混排的文章,图片最大宽度不超过屏原创 2013-08-02 18:32:47 · 63771 阅读 · 5 评论 -
CSS3 transition transform 动画实现天气预报显示
天气显示的动画。其中用到了css3 transition 动画基础。W3C标准规定:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”transition语法:transition:[||||||]transition主要包含原创 2013-07-24 18:57:55 · 3541 阅读 · 0 评论 -
防止表单提交按钮多次提交的办法
防止表单提交按钮多次提交的办法 如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型。另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交。如果使用jQuery的话,只需要在onsubmit函数中的开始位置加一句:$("#subm原创 2013-07-03 16:40:04 · 17726 阅读 · 0 评论 -
关于四块内容垂直水平居中的CSS笔试题
CSS笔试题(只用CSS实现,不用js)::四块内容相对浏览器垂直居中、水平居中,每块中按从上到下顺序包括:副标题,正标题,图片(150 x 100),正文内容。要求4张图片水平对齐,图片上下的内容自适应分别向上下延伸。自己写了一个解决方案,贴代码:body{font-family:"Microsoft Yahei",simsun;font-size:14px;}body,p,ul原创 2013-07-17 17:19:51 · 1951 阅读 · 0 评论 -
关于Apple设备私有的apple-touch-icon属性详解
以前我们用过favicon在浏览器给网站进行身份标识,用法如下:现今移动设备越来越多,苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。实现方法是在HTML文档的标签加入下面代码即可。 apple-touch-icon 标签支原创 2013-07-12 13:43:38 · 50508 阅读 · 3 评论