归档：2013年1月 - 第 2 页 - 杰拉斯的博客 —

归档：2013年1月月

[前端]浅析外边距折叠（Collapsing Margins）

杰拉斯 | 时间：2013-01-26, Sat | 11,591 views
前端开发　

我们在学习前端的过程中，有时候会出现一些奇怪的现象，Collapsing Margins便是其中之一，有时候我们想要某个元素离的第一个子元素能够下移一些，于是给它设置了margin-top，但奇怪的是这个margin-top属性却传递给了父元素，导致父元素的位置下移：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
		}
		.parent {
			height: 200px;
			background: #0099ff;
		}
		.child {
			width: 230px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="child">Child</div>
	</div>
</body>
</html>

这是个BUG吗？为什么各种浏览器都会有这样的“BUG”呢？其实，W3C规范认为margin折叠会使页面布局更加合理，比如两个段落（<p>）之间，段前间距跟段后间距应该只保留最大的一个，而不应该两者相加而导致段落之间间隙过大。下面，我们就来探究一下这个奇怪的Collapsing Margins。

(阅读全文…)

JavaScript农历转换类

杰拉斯 | 时间：2013-01-24, Thu | 8,999 views
前端开发　

今天在做项目的时候需要用到JavaScript农历转换算法，从网上搜索并整理了一下，重新写出一个JavaScript农历转换类，不敢独占，特此与大家分享。

(阅读全文…)

JavaScript日期格式化函数

杰拉斯 | 时间：2013-01-24, Thu | 6,068 views
前端开发　

Date.prototype.format = function(mask) {
    var d = this;
    var zeroize = function (value, length) {
        if (!length) length = 2;
        value = String(value);
        for (var i = 0, zeros = ''; i < (length - value.length); i++) {
            zeros += '0';
        }
        return zeros + value;
    };
    return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function($0) {
        switch($0) {
            case 'd':   return d.getDate();
            case 'dd':  return zeroize(d.getDate());
            case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];
            case 'dddd':    return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];
            case 'M':   return d.getMonth() + 1;
            case 'MM':  return zeroize(d.getMonth() + 1);
            case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
            case 'MMMM':    return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];
            case 'yy':  return String(d.getFullYear()).substr(2);
            case 'yyyy':    return d.getFullYear();
            case 'h':   return d.getHours() % 12 || 12;
            case 'hh':  return zeroize(d.getHours() % 12 || 12);
            case 'H':   return d.getHours();
            case 'HH':  return zeroize(d.getHours());
            case 'm':   return d.getMinutes();
            case 'mm':  return zeroize(d.getMinutes());
            case 's':   return d.getSeconds();
            case 'ss':  return zeroize(d.getSeconds());
            case 'l':   return zeroize(d.getMilliseconds(), 3);
            case 'L':   var m = d.getMilliseconds();
                        if (m > 99) m = Math.round(m / 10);
                        return zeroize(m);
            case 'tt':  return d.getHours() < 12 ? 'am' : 'pm';
            case 'TT':  return d.getHours() < 12 ? 'AM' : 'PM';
            case 'Z':   return d.toUTCString().match(/[A-Z]+$/);
            default:    return $0.substr(1, $0.length - 2);
        }
    });
};

[转载]提高效率的秘诀 by Aaron Swartz

杰拉斯 | 时间：2013-01-17, Thu | 10,326 views
心路历程　

译者按：Aaron Swartz是个传奇般的人物，他是一个网络奇才，也是一个资讯自由斗士。此前我对他一无所知，但早就受益于他的智慧。大学阶段，我很大一部分知识都来自于Google Reader，而RSS是他14岁跟别人共同创作的作品。自 2010年6月13日以来，我一共在Google Reader里阅读了 63,862 个条目。天妒英才，美国扭曲的知识产权保护制度和司法体系更是将他逼上了绝路。在此，我把Aaron Swartz的这篇著名的《HOWTO: Be more productive》翻译成中文，向他致敬！

总是有人这样说：“把看电视的时间用于写小说，你早就完成一部大作了！”这确实让人很难反驳，因为把时间用在写书上无疑比看电视更好。然而，这个论调隐含这样一个假设：不同种类的时间是“可互换的”。你可以轻易用看电视的时间来写一部小说。但实际上，并非如此。

时间也是分三六九等的。如果在去地铁站的路上，我发现自己忘带笔记本了，那么就很难利用这段时间写几段小说。工作时，如果总是被打断的时候，你也很难集中精力有效利用时间。有时候，还有心理作用影响时间的质量：当我兴致不错时，就能积极、高效地工作；而身心俱疲时就只能去看电视了。

如果想提高效率，你就一定要遵循以下准则：首先，你必须充分利用每一类型的时间；其次，你得尽量让时间变成优质时间。

(阅读全文…)

2013年10大网页设计趋势

杰拉斯 | 时间：2013-01-01, Tue | 18,062 views
前端开发, 前沿信息　

TNW发布了2013年10大网页 设计趋势：

响应式布局盛行，即一个网站适配多种屏幕;
重视字体的选择，使用Web字体;
更少的使用Flash，使用其他任何可能替代的技术;
苹果iOS的拟物化设计将不再时髦;
使用巨大的背景图构造大气的视觉效果;
产品和个人介绍页面留出更多空白;
更多的社交网络分享入口;
浅色、冷色调重新成为主流;
移动App将取代一部分移动网页流量;
内容依旧为王;

好了，该到我们年终展望新年的时刻了。2012年我们看到一些新的设计趋势在Web设计领域，特别是响应式页面设计。那么跟随我们的脚步，来预测一下2013年的设计趋势吧！

(阅读全文…)