爱莲学堂

用js实现瀑布流的一种简单方法

摘要：现在说瀑布流式布局似乎有点晚了，但是每一项技术都是向着“精”和“简”的方向在不断发展，在发展到极致之前，需要一个相当漫长的过程，因此，从这个角度来说，当瀑布流被应用得越来越多的时候，反而更应该讨论它，讨论如何将它改善。。。阅读全文

posted @ 2013-11-03 08:34 爱莲学堂阅读(626) 评论(0) 推荐(0) 编辑

用CSS绘制箭头等三角形图案 [译]

摘要：最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。阅读全文

posted @ 2013-08-10 12:41 爱莲学堂阅读(1358) 评论(6) 推荐(0) 编辑

前端结构解析系列之二：凯旋门结构

摘要：今天我为大家介绍一种较为少见的结构布局。我称其为凯旋门式结构。为了更直观地说明这种并不常见的前端结构，我想我们有必要先找个实例（这种实例并不好找，费了一番力气终于找了一个非常合适的）阅读全文

posted @ 2013-07-09 20:46 爱莲学堂阅读(1771) 评论(1) 推荐(0) 编辑

前端结构解析系列之一：汉堡式结构

摘要：前端结构解析是本学堂新开设的一套系列文章，简介如下。目的：总结和发现前端设计的各种结构，分析每种结构的优点与不足，说明其适用的场景和内容。方式：按照由简入繁的步骤分别对不同的结构进行解析，每种结构为一篇文章，先说明其实现方法，再分析其优缺点及适用场合，最后再介绍一到两个相关的示例页面。阅读全文

posted @ 2013-05-15 16:34 爱莲学堂阅读(1560) 评论(1) 推荐(0) 编辑

抛砖引玉式炫技：日历图标的纯CSS实现【前端开发技能必备系列】

摘要：今天我介绍采用纯CSS的方式来创建一个日历图标，你可以将其用在博客日志或者其它地方。自己也是学来的，但是效果是图片级的。如题所述，不在炫技，重在抛砖引玉。阅读全文

posted @ 2013-04-07 18:56 爱莲学堂阅读(3230) 评论(3) 推荐(8) 编辑

从实际使用分析CSS引用方式的异同

摘要：闲来无事，翻看各个门户网站的代码。发现在引用CSS的方式上存在很大的区别，主要表现为使用 import、link以及在当前页面插入。就我个人而言，一般只用到link方式，所以看到超级大站用其他两种方式不免想要探个究竟，多么可贵的学习精神…… 阅读全文

posted @ 2013-04-05 08:04 爱莲学堂阅读(1398) 评论(3) 推荐(2) 编辑

文字阴影的几种实现方式【前端开发技能必备系列】

摘要：昨天看到博问上有人问文字阴影的事。我认为，带阴影的文字在WEB前端开发中是一项非常重要的文字装饰技巧，但是由于使用的实现方式不同，文字阴影在不同网页和浏览器中的表现也不尽相同。我总结了几种比较常见的文字阴影的实现方式及其特点，希望抛砖引玉，能够更好地促进这项技巧得到更好更广泛的应用。阅读全文

posted @ 2013-03-27 00:40 爱莲学堂阅读(1068) 评论(1) 推荐(0) 编辑

侧栏跟随滚动的一种简单实现

摘要：浏览网站时经常看到有的网站上，侧栏里的有些内容滚动到页面顶端以后就固定在那个位置，不再跟随滚动条而滚动。这种效果叫做“侧栏跟随滚动”。它对于那些不希望被滚动到页面之外的内容是非常有用的。但我觉得一般的解决方案都太过复杂了，不适合小网站用。阅读全文

posted @ 2013-03-14 18:35 爱莲学堂阅读(1713) 评论(7) 推荐(2) 编辑

翻译编程类书籍，你是菜鸟还是大虾？

摘要：有经验的人都知道，如果是一位IT从业人员，那么对编程类书籍的翻译相对容易，因为其中的单词、术语甚至句子都是你在别的中文书读到过的，很少涉及生僻的俚语或是有关文化背景的知识。在此，记录一下我在翻译此书过程中的几点感受，希望对新手有所帮助。阅读全文

posted @ 2012-11-06 11:24 爱莲学堂阅读(1349) 评论(1) 推荐(1) 编辑

HTML5引入的几个简单的新控件

摘要： HTML5，在我看来，与以往版本最大的不同就是加入并支持一些新的控件。我最近翻译一本关于HTML的书，其中介绍了关于HTML5中引入的一些简单的表单控件，在此贴出来，给不认识这些控件的人做个介绍，同时，也请那些认识这些控件的朋友指点一下翻译上的不足。欢迎参与交流。阅读全文

posted @ 2012-07-15 09:40 爱莲学堂阅读(2701) 评论(0) 推荐(0) 编辑

一道腾讯前端试题，谁来试试身手

摘要：对于没参加过互联网企业招聘，或是没有参加过大型互联网企业招聘的人来说，能以这些的面试题做为锻炼，无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答)，题目本身在现实中意义不大，主要是考察应试者对js及算法的理解程度，本文给出了三种答案，期待有更大的侠来一试身手，做出更好的解答。阅读全文

posted @ 2012-07-01 07:38 爱莲学堂阅读(9688) 评论(40) 推荐(18) 编辑

利用Math.random做背景图像随机切换【前端开发技能必备系列】

摘要：利用Math.random做背景图像随机切换【前端开发技能必备系列】你应该见过（尤其是在一个网站的登录页面，比如：人人小站）这样的效果：每次登录的页面背景都是不同的。这说明该页面很有可能启用了背景随机切换的效果。最初见到这种效果的呈现时，觉得比较炫，后来仔细想想，这个用javascript实现起来应该很简单。阅读全文

posted @ 2012-06-24 23:25 爱莲学堂阅读(2850) 评论(5) 推荐(2) 编辑

你想不到的压缩方法：将javascript文件压缩成PNG图像存储

摘要：你有没有想过：为了压缩js文件，把js文件转化成PNG图像，然后用 canvas 控件中的 getImageData() 函数将图像再重新读成js文件。我昨天在这里发表的JS文件快速加载的文章中提到了这一方法，有些网友通过留言表示对这个做法很感兴趣，于是今天详细解读一下。阅读全文

posted @ 2012-06-21 08:38 爱莲学堂阅读(13539) 评论(44) 推荐(29) 编辑

摘要：经常听到客户问这样的问题：你们帮我看看我的网站怎么打开那么慢啊，是不是中毒了？然后我们就去测试他的网站，发现问题简单的很：每个网页的开头有着不计其数的外联文件。样式表还好，最多的不外乎几十K。可怕的是JS文件，这些个企业的负责人都不是IT专业人员，兼职管理企业的网站，喜欢迎合领导搞些特效什么的，又不知道优化。什么JQUERY，特效，验证等等，全都罗列在head里，林林总总快一千k了。阅读全文

posted @ 2012-06-20 17:31 爱莲学堂阅读(9560) 评论(19) 推荐(9) 编辑

图片延迟加载【前端开发技能必备系列】

摘要：在网上经常会看到一些很长的网页会延迟加载其中的图片，我认为这是一种按需分配的做法，网页只为那些想继续浏览网页的人加载后面的图片，在不影响用户体验的前提下，最大程度地减少服务器负担和流量。目前，主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件，很好用，在这里介绍一下。阅读全文

posted @ 2012-06-18 08:33 爱莲学堂阅读(5366) 评论(14) 推荐(19) 编辑