标签前端下的文章

Jerry Bendy 发布于 01月23, 2015

在前端使用和编译LESS

做前端的应该都会知道LESS,使用LESS书写CSS样式可以在很大程序上降低工作量以及由拼写造成的错误,但对新手来说除了LESS的语法外,如何在自己的工作环境上用上LESS可能也是个问题。个人认为,使用LESS最简单的方法就是实时编译:即对LESS文件做的修改可以在不额外加任何操作(编译)的情况下应用在测试环境甚至生产环境,毕竟对LESS文件每做一点小修改都要重新编译一次也太麻烦了些,而且很慢。实时编译有两种方法:一是在HTML中引入less.js文件,并且设置工作环境是“development”,这样在网页每次载入时都会重新编译LESS文件;二是使用某些编辑器,如SublimeText,SublimeText有...

阅读全文 »

Jerry Bendy 发布于 09月12, 2014

了解CSS中单位px、em和rem的区别

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?PX特点IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器...

阅读全文 »

Jerry Bendy 发布于 02月12, 2014

【收藏】前端优秀辅助工具(html5+css3)

CSS3对于前端工程师来说,越来越重要了。有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情。CSSAnimatieCSSAnimatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。http://cssanimate.com/LongShadowsGenerateLongShadowsGenerate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。http://sandbox.juan-i.com/longshadows/Fontasti...

阅读全文 »

Jerry Bendy 发布于 01月03, 2014

JQuery Lazyload的基本用法

由于最近做的一个小网页需要用到懒加载的效果于是便研究了下JQuery的Lazyload插件。本文不深入讲解,只说下此插件的基本用法(也许只有不到10%的人会用到其它的复杂的方法,我就挑90%的人会用到的说)。JQueryLazyloadGithub地址:https://github.com/tuupola/jquery_lazyload我就不单独做示例了,在我做的Tab页(http://tab.byi.pw)里面也能看到效果。(该网站目前已改成React,不再使用jQuery)首先需要载入JQuery库和Lazyload插件:<scriptsrc="jquery.js"type="text/javascri...

阅读全文 »

Jerry Bendy 发布于 09月25, 2013

HTML中关于mailto链接的一些使用技巧

大家知道HTML里面的超链接(a)可以指向一个网址或书签,孰不知a标签还可以用来发送邮件。很多网站都会在醒目的位置上写上自己的电子邮件地址,使用户点击这个链接后就可以打开电脑上默认的电子邮件客户端发送邮件,如Foxmail等,这需要用到一个mailto标签,如<ahref="mailto:jerry@icewingcc.com">给我发邮件</a>。当然,这只是mailto最基本的用法,它还可以像一般网址一样添加参数。网址的参数格式想必大家都知道,就是形如“http://aaa.abc.com/index.php?cc=xxx&dd=xxx&ee=xxx...

阅读全文 »

Jerry Bendy 发布于 06月10, 2013

爱上朴实的CSS细节

未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜、颜色等视觉效果。这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍。如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器、单位、函数(方法)。我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的。怎么说呢,让我们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了,但值得我们更好地认识,而有些则刚刚面世。虽然不起眼,但是它们可以提高我们的工作效率——以谦虚的姿态。相对单位聪明又有前瞻头脑的开发者们已经使用相对单位了——如...

阅读全文 »

Jerry Bendy 发布于 04月28, 2013

CSS3打造不断旋转的CD封面

最初看到这个效果是在一个音乐站,http://jing.fm,这个网站的界面做得非常不错,音乐也很有风格。当我第一次进入这个网站时最感兴趣的还是中间那个不断旋转的光盘封面,就想知道它是如何运作的,以及如何能把它也放在我的网站首页上面以增加效果,具体的效果可以去jing.fm看下,用新浪微博账号即可登录。 我提取的效果仅仅包含了使其旋转的部分代码,并没有包括中间的暂停按钮。 演示中用的图片及CSS代码全部从jing.fm提取,我只是对它做了一些简化。再者由于本人刚接触网页不太久,很多东西还不能得到深刻的认识,目前就先分享一些简单的内容。 会CSS的人从源码都能看懂它的工作方式,我只解释一些我自己学习过程中有疑惑...

阅读全文 »

Jerry Bendy 发布于 04月03, 2013

编写高效的CSS(二)

继上节讨论了一些常用的提高CSS效率技巧之外,本文将参考MozillaUI中介绍的CSS优化规则深入讨论CSS的优化原理.本文第一部分说明CSS的书写规则,第二部分分析应该使用哪些规则才能使页面渲染效率更高.一.CSS的4种书写规则首先声明,我在本文中定义一个术语叫–主选择符.其定义是在一个选择符中最右边的那部分.(浏览器匹配选择符的时候是从最右边开始的,而不是从他的祖先选择符开始的.)举例说明:aimg,div>p,h1+[title]{}divpa{}这里主选择符就是指img,p,[title],a.1.ID系列选择符就是包含ID的选择符例如:button#backButton{}/*ThisisanI...

阅读全文 »

Jerry Bendy 发布于 04月02, 2013

编写高效的CSS提高CSS渲染效率的一些技巧

最近忙着找工作,面试的时候有这样一道题目:列举至少10条CSS影响页面渲染效率的写法.虽然写了将近一年的CSS了,但这个问题还真没详细总结过,当时回答的不完整,回来后赶紧查找相关资料.经过查阅资料以及跟朋友们的交流,大致总结出以下几点:1.尽量避免使用IE滤镜滤镜是IE私有属性,而非W3C标准,因此只在IE下有效,其他标准浏览器都不支持,滤镜会明显降低页面的渲染效率,既耗资源兼容性又差,所以要尽量避免使用2.尽量少使用*号选择符例:*{…},#id*{…}*在CSS中作为通配符选择所有的元素建议尽量避免使用*选择符.原因有2:使用*会遍历全部的标签所以会降低渲染效率*号作为通配符会对所有的样式进行重新定义3.不宜...

阅读全文 »