摘要：之前提到，Modernizr 是 HTML5 和 CSS3 的特性检测工具，这里简单介绍一下它的用法。最简单的用法是在页面的 中添加 Modernizr 的 JavaScript 文件： Modernizr 脚本执行后，你会发现页面类似下面的样子（以 IE9 为例）： 可以看到，Modernizr 检测了数十个 HTML5 和 CSS3 特性之后，将结果记录在 html 标签的 class 属性中，其中带 no 前缀的表示浏览器不支持该特性，不带 no 前缀的表示浏览器支持该特性。这样，我们就可以根据 html 标签的这些 class 属性，在 CSS 文件中针对不同的特性应用不... 阅读全文

摘要：在刚开始的时候，我们只能用 getElementById，getElementsByClassName，getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素。后来，在 W3C 的选择器 API 标准中[1]，提供了 querySelector 和 querySelectorAll 这两个利用 CSS 选择器查找元素的方法。它们的语法如下：element = document.querySelector(selectors);elementList = document.querySelectorAll(selectors);其中，document.queryS 阅读全文

摘要：在 Wep App 中，我们经常需要在 JavaScript 中处理链接的点击。因此，我们希望用户点击 元素时阻止它的默认行为。此时我们可以用很多不同的方法来处理。例如：Click MeClick MeClick MeClick MeClick MeClick Me第一种方法最简单，但是它会导致点击时页面滚动到页首。因此第二种方法利用 return false 语句阻止默认行为的执行。后面几种方法利用javascript: URI 来达到页面不跳转的效果：按照规定，只要 javascript 代码执行的结果不为 undefined，则页面不跳转。因此第三、四种方法利用了 void 操作符的返. 阅读全文

摘要：在 HTML 中， iframe 元素用于在网页中嵌入其它网页的内容，例如：其中，iframe 的 src 属性指明要显示的其它网页的地址，而标签中的内容仅在浏览器不支持 iframe 时显示。对于 iframe 元素，有一些需要注意的问题。首先，从它的名称（inline frame）中可以知道，它是 inline 元素，因此如果要让它填满整个 block 元素，需要设置 iframe 的样式为 display: block。比如下面的例子：这个例子中，由于 iframe 默认是 inline 元素，默认它会放在基线之上，而基线之下还有一定高度（即 descender 部分）所以它会溢出了。因 阅读全文

摘要：CSS 的选择器有很多类型，我们将常用的这些列表如下：一、CSS 选择器的类别1. 基本选择器基本选择器解释备注*通用选择器，匹配所有元素CSS2E元素选择器，匹配类型为 E 的所有元素CSS1.foo类选择器，匹配 class 属性包含 "foo" 的所有元素CSS1#barID 选择器，匹配 id 属性等于 "bar" 的惟一元素CSS12. 组合选择器组合选择器解释备注E, F多元素选择器，匹配 E 和 FCSS1E F后代选择器，匹配 E 的后代 FCSS1E > F子元素选择器，匹配 E 的子元素 FCSS2E + F相邻选择器，匹配紧随 阅读全文

摘要：在 Android 和 iOS 等触屏设备中，如果网页中某元素设置 overflow: auto 或者 overflow:scroll，那么问题就来了。在 Android 3.0 之前以及 iPhone OS 3.0 之前的自带浏览器中，你无法用手指拖动该元素所在区域，这样就相当于 overflow: hidden 了。在 Android 3.0 中，这个问题解决了，但是该溢出区域不会显示滚动条。而在 iPhone OS 3.0 中这个问题却是以另一种方式解决：我们只能用两个手指拖动溢出区域，而且该区域同样不会显示滚动条。一直到了 iOS 5.0，苹果公司才完整解决了这个问题，这时候可以单指拖 阅读全文

摘要：在使用 AJAX 方式更新页面内容后，页面的 URL 并没有改变，因此用浏览器的前进和后退无法切换这些不同的页面状态。这个问题利用 HTML5 的 history API 可以完美地解决。HTML5 history API最简单的例子如下：if (history.pushState) { var state = {page: 2 }; history.pushState(state, "title", location.href + '#2'); window.onpopstate = function(event) { console.log(event. 阅读全文

摘要：Rsync 是一个文件和目录同步工具，它通过计算发送端和接收端的文件各部分校验和，可以只同步文件的改动部分。Rsync 的基本用法如下：rsync [OPTION] SRC [SRC] [USER@]HOST:DESTrsync [OPTION] [USER@]HOST:SRC [DEST]其中 SRC 为源路径，而 DEST 为目标路径，USER 和 HOST 分别为用户名和密码。前一种用法将本地目录文件上传到服务器目录，后一种用法从服务器目录下载文件到本地目录。例如：rsync -avz --delete /root/foo/ user@example.com:/root/bar/rsyn 阅读全文

摘要：Nginx 是一个流行的网页服务器和反向代理服务器软件，它充分利用异步逻辑，实现了低内存占用和高并发连接。很多网站都将 Nginx 部署到 Apache 服务器之前作为反向代理，甚至直接用 Nginx 替换 Apache 作为网页服务器。安装 Nginx 非常简单：各大 Linux 系统中都包含了 Nginx，而 Windows 系统可以下载 Nginx 网站提供的二进制压缩包。现在我们来看看 Nginx 的基本设置。Nginx 的配置文件为 nginx.conf。首先看如何将 Nginx 配置为静态网页服务器。最简单的例子如下：http { server { listen... 阅读全文

摘要：一、try-catch-finally为了处理可能出现的错误，我们可以用 try-catch 语句。例如：try { doSomeThing(); return 1; } catch (err) { handleError(); return 2; }这时候当 doSomething 函数能够正常执行时，返回 1；而当 doSomeThing 函数执行出现错误时将执行 handleError 函数并返回 2。当然我们也可以在最后加上 finally 子句，例如：try { doSomeThing(); return 1; } catch (err) { handleErro... 阅读全文

摘要：一、no-cache 与 max-age在 HTTP 1.0 中，服务器可以用头部信息的 Pragma: no-cache 字段指示浏览器不缓存该页面，或者用 Expires: Mon, 10 Jun 2013 01:50:58 GMT指示浏览器在某时间后删除该页面的缓存。用非法的时间例如 Expires: -1 同样可以让浏览器不缓存该页面。而在 HTTP 1.1 中，我们可以用 Cache-Control 字段进行更仔细的缓存控制。例如前面两个字段在 HTTP 1.1 可以分别类似 Cache-Control: no-cache 和 Cache-Control: max-age=3600 阅读全文

摘要：HTTP 的 Cookie 字段是由 RFC 6265 规定的。浏览器访问某个网站时，通过 HTTP 头部的 Set-Cookie 字段，服务器可以在浏览器中设置一个 cookie：Set-Cookie: name=value然后，浏览器下次访问该网站时的每个页面的时候，将会通过如下方式将前面的 cookie传回给服务器：Cookie: name=value当然，我们也可以设置多个 cookie，此时只需要将它们用分号隔开，例如：Set-Cookie: name1=value1; name2=value2在 Set-Cookie 字段中，还有其它的选项可以使用，包括这些（选项名不区分大小写）： 阅读全文

摘要：CSS3 中的弹性盒布局（Flexible Box Layout）标准已经进入候选推荐阶段，大部分浏览器也开始支持这个标准了，这里我们来介绍下这个标准。在最新的 Chrome 中浏览下面的例子，可以看到父元素被横向分为三部分，而当鼠标移动到某一部分上面时，各部分的宽度会自动调整：​ one two three在上面的例子中首先我们设置了父元素的 display: flex; flex-direction: row; ，表示我们使用横向的弹性布局。display 也可以设为 inline-flex，这时候父元素就类似于 inline-block 的元素。接下来我们对三个子元素分析设置了 f... 阅读全文

摘要：在 CSS2 的盒模型中，一个元素的渲染宽度（rendered width）等于 width + padding + border，渲染高度等于 height + padding + border。元素的渲染大小就是它在网页中实际占用的盒子大小。这种规定在很多时候让人很头疼。比如你想让子元素的 padding-width: 10px 和 border-width: 2px，然后填满父元素的所有空间，这时候简单地来一个 width: 100% 和 height: 100% 是会溢出的。当父元素的大小是固定的时候，我们很容易计算出正确的 width 和 height。但是，如果父元素的大小也不是固 阅读全文

摘要：这里收集见过的一些美观的个人博客，不定时更新：Home - G2WHeroic Yang's BlogJS Mix - 不会做蛋炒饭的小提琴手不是好程序员Kingauthur's Blog ←LucifrPIZnRay未志掌心这些博客可以供设计时参考。另外 WordPress 官方主题站里也有许多博客主题可以参考。 阅读全文

摘要：CSS 的轮廓(outline)属性有点像边框(border)属性，但两者还是有明显不同之处的。我们先看一个例子：div#test { width: 100px; border: 1px solid #000000; outline: 3px solid #6688AA;}可以看到在宽度为 1px 的 border 外面由多了一层宽度为 3px 的 outline。考虑到两者的写法也一致，为何有了 border 还需要 outline 这个属性呢？实际上，outline 和 border 的最大区别在于，它不占用空间，无论 outline 多宽也不会影响正常的页面流。所以，可... 阅读全文

摘要：在 CSS 中，由于浮动元素不包含在正常的页面流中，所以如果父元素只有浮动子元素，浮动子元素将会脱离父元素，产生我们不想要的结果。例如（结果见这里）： Hello World可以看到两个浮动的子元素并不会撑开父元素，而是跑到下边去了。这个问题的解决方法有下面几种：父元素设置 overflow 为 hidden 或者 auto父元素设置 float 为 left 或者 right父元素设置display 为 table添加空白 div 或者 br 并设置为 clear: both添加 :after 伪元素并设置 content: '' '';display: ta 阅读全文

摘要：在 CSS 中我们可以设定用 color 和 background-color 设定元素的前景色和背景色。例如：a { color: #123456; background-color: #ABCDEF;}CSS2 中使用的是 24位 RGB 颜色：即一个颜色由红绿蓝三部分组成，每部分用两位 16 进制数表示，总共可以表示 2^24 =16777216 种不同的颜色。在 RGB 颜色中，最小值 #000000 表示黑色，而最大值 #FFFFFF 表示白色，而 #FF0000，#00FF00 和 #0000FF 分别表示纯红色，纯绿色和纯蓝色。RGB 颜色值还有其它的表示方式：#33... 阅读全文